JavaScript事件及BOM和DOM
1. 事件
1.1 事件绑定
# 写在html元素中
<button onclick="code..."></div>
# 把事件当做元素对象的方法
btnEle.onclick = function(){
}
# 事件监听
btnEle.addEventListener('click', function(){
}, false) fasle表示 冒泡阶段触发（默认）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的原理</title>
<style>
.active {
background: pink;
}
</style>
</head>
<body>
<h1>事件原理</h1>
<hr>
<button id="btn">按钮</button> <script>
//事件绑定在一个元素上
//事件绑定 var btn = document.querySelector('#btn'); // function demo(){ // }
// 标准的绑定事件 添加事件监听 IE8不兼容 attachEvent('onclick', function)
// 两次监听都会被捕获到
btn.addEventListener('click', function(){
alert(100)
}) btn.addEventListener('click', function(){
alert(200)
}) //更常用-------把事件当做元素对象的方法
btn.onclick = function(){
this.classList.toggle('active'); } </script>
</body>
</html>
事件
1.2 事件的捕获和冒泡
捕获阶段： 从祖先元素 到 子元素
冒泡阶段： 从子元素 到 祖先元素
事件默认在冒泡阶段触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的捕获和冒泡</title>
<style>
#wrapper {
width: 200px;
height: 200px;
border: 2px solid pink;
background-color: #ccc;
}
#inner {
width: 100px;
height: 100px;
margin: 50px;
background: green;
}
</style>
</head>
<body> <h1>同志交友</h1>
<hr>
<!--捕获阶段： 从祖先元素 到 子元素，=============》冒泡阶段： 从子元素 到 祖先元素 -->
<div id="wrapper">
<div id="inner"></div>
</div> <script>
//事件只在冒泡阶段触发的
var wrapperEle = document.querySelector('#wrapper');
var innerEle = document.querySelector('#inner'); wrapperEle.onclick = function(){
alert('我是大的'); //这是绑定事件执行的动画
} innerEle.onclick = function(event) {
alert('我是小的');
event.stopPropagation(); //阻止冒泡，这样触发小的事件时就不会影响大的
}
</script> </body>
</html>
事件捕获和冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的捕获和冒泡</title>
<style>
#wrapper {
width: 200px;
height: 200px;
border: 2px solid pink;
background-color: #ccc;
}
#inner {
width: 100px;
height: 100px;
margin: 50px;
background: green;
}
</style>
</head>
<body> <h1>同志交友</h1>
<hr> <div id="wrapper">
<div id="inner"></div>
</div> <script>
//默认false时：事件是在冒泡阶段触发的
var wrapperEle = document.querySelector('#wrapper');
var innerEle = document.querySelector('#inner'); // 将默认的false给为true，事件的触发就会变为在捕获阶段触发，此时我们在加阻止冒泡也不起作用
wrapperEle.addEventListener('click', function(){
alert('我是大的');
}, true) innerEle.addEventListener('click', function(event) {
alert('我是小的');
event.stopPropagation(); //阻止冒泡
}, true)
</script> </body>
</html>
事件在捕获阶段触发
1.3 常用事件
鼠标事件
click 单击
dblcick 双击
contextmenu 右击
mouseenter mouseover 鼠标悬停
mouseleave mouseout 鼠标离开
mousedown 鼠标按键按下
mouseup 鼠标按键抬起
mousemove 鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style> </style>
</head>
<body>
<h1>常用事件--鼠标事件</h1>
<hr> <script>
// 绑定给整个document，在窗口的任意位置右击都会触发该事件的执行
document.oncontextmenu = function(){
alert('啊，我被右击了'); //当我们鼠标右击，就会弹出对话框
// return false; //阻止系统菜单
}
</script>
</body>
</html>
鼠标事件
键盘事件
keydown 键盘按键按下
keyup 键盘按键抬起
keypress 按键按下 只有可输入的按键才能触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<style>
#box {
width: 100px;
height: 100px;
background: pink;
position: absolute;
}
</style>
</head>
<body>
<div id="box" style="left:100px;top:200px"></div> <script>
// 将键盘事件绑定给document，这样我们只要键盘按下该事件就会被触发执行
document.onkeydown = function(e){
var boxEle = document.querySelector('#box');
switch (e.keyCode) {
case 37: //左键
boxEle.style.left = (parseInt(boxEle.style.left) - 5) + 'px'; //parseInt可以将字符串中的数字转换成数字
break;
case 38: //上键
boxEle.style.top = (parseInt(boxEle.style.top) - 5) + 'px';
break;
case 39: //右键
boxEle.style.left = (parseInt(boxEle.style.left) + 5) + 'px';
break;
case 40: //下健
boxEle.style.top = (parseInt(boxEle.style.top) + 5) + 'px';
break;
default:
console.log(e.keyCode); //点击除上下左右键会在控制台打印出该键对应的ASCII码
}
}
</script>
</body>
</html>
键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>键盘事件</title>
<style>
input {
width: 300px;
padding: 10px;
border: 1px solid #ccc;
font-size: 16px;
} #res {
margin-top: 20px;
}
</style>
</head>
<body>
<!-- 实现的效果是在表单中输入的内容，在表单的下方会同步显示 -->
<input type="text" id="inputEle">
<div id="res"></div> <script>
// 先获取表单元素
var inputEle = document.querySelector('#inputEle');
// 将表单元素绑定给键盘抬起是触发的事件
inputEle.onkeyup = function(){
document.querySelector('#res').innerHTML = this.value; //事件触发执行的函数体代码，获取div元素内容，将获取的表单元素内容赋值给该div元素
}
</script>
</body>
</html>
键盘事件2
表单事件
blur 失去焦点
focus 获取焦点
submit 提交 绑定给form元素
reset 重置 绑定给form元素
select 输入框内容被选中
change 内容改变切失去焦点 适合select 选项以改，触发
input 输出内容改变 触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单事件</title>
</head>
<body>
<form action="1.php" id="myForm">
用户名： <input type="text" id="userEle" name="username"> <br> <!--内联元素不换行，所以我们为了达到效果，加了一个换行<br>-->
密码： <input type="password" id="pwdEle" name="pwd"> <br>
<button>提交</button>
<input type="reset" value="重置">
</form> <script>
// 先获取用户输入表单元素和整个表单元素
var userEle = document.querySelector('#userEle');
var formEle = document.querySelector('#myForm');
// 失去焦点也就是鼠标点击输入框然后从输入框移走，点击了输入框以外的其他元素
userEle.onblur = function() {
console.log('失去焦点啦'); //失去焦点显示的内容是在控制打印出来的，当然你也可让他在前端页面显示你想要的效果
// alert('失去焦点')
}
// 鼠标光标点击输入款就会获取焦点，在控制塔就会打印出内容
userEle.onfocus = function() {
console.log('获取焦点啦');
//在失去焦点的时候，验证内容合法性
} //选中输入框中的文字
userEle.onselect = function() {
console.log('啊，我被选了');
} //对于输入框，内容改变 并且失去焦点 （没用）
userEle.onchange = function() {
console.log('啊，我变了');
} //类似于 用的keyup 内容变化就触发 兼容性不好
userEle.oninput = function(){
console.log('啊，我变了');
} //form表单的事件
formEle.onsubmit = function() {
alert('啊，我被提交了');
return false; //阻止表单提交
}
</script>
</body>
</html>
表单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地址联动</title>
<style>
select {
width: 100px;
padding: 5px;
font-size:16px;
}
</style>
</head>
<body>
<h1>选择地址</h1>
<hr>
<select id="prov"></select>
<select id="city"></select> <script>
// 实现功能：当我们选中省份，就会显示该省份下下的所有城市
//定义省市的信息
var provList = ['江苏','浙江','福建','湖南'];
var cityList = [];
cityList[0] = ['南京', '苏州', '宿迁', '扬州'];
cityList[1] = ['杭州', '温州', '宁波', '台州'];
cityList[2] = ['福州', '厦门', '泉州', '漳州'];
cityList[3] = ['长沙', '湘潭', '株洲', '湘西']; //获取select元素
var provSelect = document.querySelector('#prov');
var citySelect = document.querySelector('#city'); //把省的信息 添加到第一个select元素中
provList.forEach(function(val, index){
//DOM操作 了解
provSelect.add(new Option(val, index))
}); //给第一个select绑定change事件
provSelect.onchange = function(){
//获取 当前的选项
var index = this.value; //清空第二个select原先内容
citySelect.length = 0; //选择对应的城市列表，添加到第二个select
cityList[index].forEach(function(val, index){
citySelect.add(new Option(val, index));
})
} //手工触发一次 change事件
provSelect.onchange(); </script>
</body>
</html>
应用：地址联动
文档事件
load 绑定给body 绑定给window 绑定给 img 、link、script 文档加载完成
unload 文档关闭
beforeunload 文档关闭之前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档事件</title>
</head>
<body>
<h1>文档事件</h1>
<hr>
<!-- <img src="http://www.google.com/1.jpg" alt=""> --> <script>
window.onload = function(){
//一些操作 必须等到页面中 所有的内容 加载完毕
console.log('页面加载完毕');
alert('页面加载完毕')
} // 当我们关闭当前页面，就会触发该事件的执行
window.onbeforeunload = function(){
return '你确定要离开我码？'; //最新的Chrome不支持显示文字，ie浏览器可以显示文字
}
</script>
</body>
</html>
文档事件
图片事件
load 图片加载完毕
error 图片加载错误
abort 图片加载中断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片事件</title>
<style>
#imgList img {
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<h1>图片事件</h1>
<hr> <div id="imgList">
<img src="../../dist/images_one/1.jpg" alt="">
<img src="../../dist/images_one/2.jpg" alt="">
<img src="../../dist/images_one/3.jpg" alt="">
<img src="../../dist/images_one/4.jpg" alt="">
<img src="../../dist/images_one/41.jpg" alt="美图">
<img src="../../dist/images_one/7.jpg" alt="">
<img src="../../dist/images_one/8.jpg" alt="">
</div> <script>
//获取所有图片的列表img元素
var imgs = document.querySelectorAll('#imgList img'); //给每个img元素绑定 error 事件-----也就是当图片不存在是，我们为其重新指定一个url地址让其显示一张图片
for (var i = 0; i < imgs.length; i ++) {
imgs[i].onerror = function() {
this.src = '../../dist/images_two/11.jpg'
}
}
</script>
</body>
</html>
图片事件
其他事件
scroll 滚动
resize 大小调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他事件</title>
</head>
<body>
<div style="height:20000px"></div>
<script>
// 将窗口绑定给滚动事件，当我们滚动滚动条，就会执行function内的函数体代码
window.onscroll = function(){
console.log('页面在滚动');
} // 将窗口对象绑定给调整窗口大小的事件，当调整窗口大小时就会触发事件的执行
window.onresize = function(){
console.log(window.innerWidth, window.innerHeight)
}
</script>
</body>
</html>
其他事件
1.4 Event对象 事件对象
属性
clientX 鼠标的坐标
clientY 鼠标的坐标
keyCode 键盘的按键 ascii码
button 鼠标按键 0 1 2
target 返回元素 具体触发的元素
方法
stopPropagation() 阻止事件冒泡
preventDefault() 阻止元素的默认事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象</title>
</head>
<body>
<h1>event对象</h1>
<hr>
<form action="1.php">
<button id="btn">按钮</button>
</form>
<script>
// 先获取按钮元素
var btn = document.querySelector('#btn'); // 将元素对象绑定给单机按钮事件，当我们单机按钮时就会触发事件的执行
btn.onclick = function(event){
alert('啊，我被点击了');
event.preventDefault(); //阻止元素的 默认动作就是当我们点击时就会跳转到一个新的页面，设置阻止元素的跳转，当我们在点击也不会跳转到新的页面
} // event对象的target属性，就是当我们点击窗口的任意地方就会显示该地方所包含的元素内容
document.onclick = function(event) {
console.log(event.target)
}
</script>
</body>
</html>
事件对象event
2. BOM 浏览器对象模型
2.1 window
#属性
window.innerWidth 窗口的宽
window.innerHeight 窗口的高
history
location
screen
navigator
# 方法
setInterval()
clearInterval()
setTimeout()
clearTimeout()
Number()
String()
Boolean()
alert()
confirm()
prompt()
2.2 history
属性
length
方法
back() 后退一步
forward() 前进一步
go(1) 前进/后退 n 步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window</title>
</head>
<body>
<button onclick="history.back()">上一步</button>
<button onclick="history.forward()">下一步</button>
<button onclick="history.go(-2)">上两步</button>
<button onclick="history.go(1)">下1步</button> <hr> <a href="http://www.baidu.com">百度</a> <script>
console.log(history)
console.log(window.history) console.log(history.length); //历史记录的长度 </script>
</body>
</html>
bom-history
2.3 location
属性
href
protocol
host
hostname
port
pathname
search
hash
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location</title>
</head>
<body>
<script>
console.log(location)
console.log(location.href) //返回完整的URL
console.log(location.protocol) //返回一个URL协议
console.log(location.host); //主机名和端口
console.log(location.hostname) //返回URL的主机名
console.log(location.port) //返回一个URL服务器使用的端口号
console.log(location.pathname) //返回URL的路径名
console.log(location.search) //返回URL查询部分，就是url地址中？后面的部分
console.log(location.hash) //返回一个URL的锚部分，就是url地址中，#后面的部分 location.href= "1.html" //可以修改url地址
location.hash = '#哈哈哈' //可以修改url地址中的hash值
</script>
</body>
</html>
bom-location
2.4 screen
屏幕
2.5 navigator
属性
userAgent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>navigator</title>
</head>
<body>
<script>
console.log(navigator.userAgent) //查看浏览器的版本信息
</script>
</body>
</html>
bom-navigator
3. DOM 文档对象模型
3.1 常见的dom对象
所有的元素对象 都是dom
document dom对象 表示整个文档
document.body 获取body元素
document.documentElement 获取HTML元素
3.3 元素内容
innerHTML
innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style>
#box {
padding: 20px;
width: 600px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="box">
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</div> <script>
// 先获取元素
var box = document.querySelector('#box');
// 显示的双标签，以及双标签中的内容
console.log(box.innerHTML)
// 只显示双标签中的内容
console.log(box.innerText) box.innerHTML = '<ul><li>HELLO</li></ul>' //将获取的元素内容改成HELLO，而不是原样输出'<ul><li>HELLO</li></ul>'
// box.innerText = '<ul><li>HELLO</li></ul>' //会原样输出'<ul><li>HELLO</li></ul>'
</script>
</body>
</html>
DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todoList</title>
<style>
#todoList {
list-style: none;
margin:10px 0px;
padding:0;
width:600px;
}
#todoList li {
margin-bottom:5px;
padding: 10px;
border: 1px solid #ccc;
background:#f5f5f5;
position: relative;
}
input {
padding:10px;
font-size:16px;
border:1px solid #ccc;
}
button {
padding:10px 20px;
border:1px solid #ccc;
background: #f5f5f5;
outline: none;
cursor: pointer;
} #todoList span {
position: absolute;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<input type="text" id="content">
<button id="btn">添加</button>
<ul id="todoList">
<li>去钓鱼 <span>×</span></li>
<li>去洗澡 <span>×</span></li>
<li>去吃饭 <span>×</span></li>
<li>去睡觉 <span>×</span></li>
</ul> <script>
// 实现功能：在输入框中输入的内容，可以在下面按照我们想要的格式原样输出，并且可以通过叉号将其删除
// 先获取以下四个元素
var input = document.querySelector('#content');
var btn = document.querySelector('#btn');
var todoList= document.querySelector('#todoList');
var spans = document.querySelectorAll('#todoList span'); btn.onclick = function(){
//获取 input的内置
var text = input.value; //创建li元素 并给li元素添加包裹 内容
var li = document.createElement('li');
li.innerText = text;
var span = document.createElement('span');
span.innerHTML = '×';
li.appendChild(span); //把li元素添加到ul中
todoList.appendChild(li);
} /*spans.forEach(function(span){
span.onclick = function(){
todoList.removeChild(this.parentNode)
}
})*/ //委派方式绑定
todoList.onclick = function(event) {
if (event.target.nodeName === 'SPAN') {
this.removeChild(event.target.parentNode);
}
}
</script>
</body>
</html>
纯DOM操作
JavaScript事件及BOM和DOM的更多相关文章
- 实现JavaScript的组成----BOM和DOM
我们知道,一个完整的JavaScript的实现,需要由三部分组成:ECMAScript(核心),BOM(浏览器对象模型),DOM(文档对象模型). 今天主要学习BOM和DOM. BOM: BOM提供了 ...
- javascript学习笔记 BOM和DOM详解
js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)的不同,具体的表现形式也不尽相同,ie和其他的浏览器风格迥异. 1. DOM 是 W ...
- [转] JavaScript学习：BOM和DOM的区别和关联
BOM 1. BOM是Browser Object Model的缩写,即浏览器对象模型. 2. BOM没有相关标准. 3. BOM的最根本对象是window. 从1可以看出来:BOM和浏览器关系 ...
- JavaScript中的BOM和DOM
javascript组成: 1. ECMAScript 基本语法. 2. BOM (浏览器对象模型) 3. DOM (文档对象模型) 简单的说就是 BOM是浏览器对象模型,用来获取或设置浏览器的属性. ...
- javascript事件捕获机制，dom tree
$(document,"a").on("click",function(){alert(2);return false;}); $("<a> ...
- 前端javascript之BOM、DOM操作、事件
BOM与DOM操作 BOM 浏览器对象模型>>>:使用js操作浏览器 DOM 文档对象模型>>>:使用js操作前端页面 window对象 所有浏览器都支持 wind ...
- BOM、DOM学习笔记——JavaScript
1.BOM的概述 browser object modal :浏览器对象模型. 浏览器对象:window对象. Window 对象会在 <body> 或 <fram ...
- JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...
- 从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
随机推荐
- 【[JLOI2013]卡牌游戏】
思路太妙了 刚开始yy出了一种比较自然的dp方法,就是按照游戏的进行来开始dp,设\(dp[i][j]\)表示第\(i\)个人为庄家,还剩下\(j\)个人的概率为多少,但是很快发现这个样子没法转移,因 ...
- boost::timer库使用
boost::timer boost库定时器使用,需要在编译时加相关链接库 -lboost_timer -lboost_system boost::timer::cpu_timer 和boost::t ...
- 机器学习之感知器算法原理和Python实现
(1)感知器模型 感知器模型包含多个输入节点:X0-Xn,权重矩阵W0-Wn(其中X0和W0代表的偏置因子,一般X0=1,图中X0处应该是Xn)一个输出节点O,激活函数是sign函数. (2)感知器学 ...
- BZOJ 1878 [SDOI2009]HH的项链 【莫队】
任意门:https://www.lydsy.com/JudgeOnline/problem.php?id=1878 1878: [SDOI2009]HH的项链 Time Limit: 4 Sec M ...
- javascript中数组的22种方法 （转载）
前面的话 数组总共有22种方法,本文将其分为对象继承方法.数组转换方法.栈和队列方法.数组排序方法.数组拼接方法.创建子数组方法.数组删改方法.数组位置方法.数组归并方法和数组迭代方法共10类来进行详 ...
- Pyplot教程（深度学习入门3）
源地址:http://matplotlib.org/users/pyplot_tutorial.html .caret, .dropup > .btn > .caret { border- ...
- String.prototype是什么？
String.prototype用于为某字符串对象新增方法,比如: 在javascript中有一方法replace,它是用于替换某字符串中第一个匹配的字符,如果我们想为它追加一个循环匹配所有字符的方法 ...
- M4修改外部晶振8M和25M晶振的方法
共计修改三个参数: 1.HSE_VALUE 具体位置在stm32f4xx.h中 2.PLL_M 具体位置在system_stm32f4xx.c中 3.Keil编译器 工程的Opt ...
- python3带tkinter窗口的ftp服务器,并使用pyinstaller打包成exe
python带tkinter窗口的ftp服务器,使用python3编写,打包使用pyinstaller,命令 pyinstaller -F .\ftpserver.py 代码也可在我的github上下 ...
- 【centOS7.3 彻底卸载MySQL】
废话不多说,直接正面刚. 1.删除MySQL yum remove mysql mysql-server mysql-libs mysql-server; 执行后继续查找相关文件 find / -na ...