目录
一、事件的绑定语法
语法形式1
事件监听 标签对象.addEventListener('click',function(){});
语法形式2
on语法绑定 标签对象.onclick = function(){}
on语法是通过 = 等于赋值绑定的事件处理函数 ,= 等于赋值本质上执行的是覆盖赋值,后赋值的数据会覆盖之前存储的数据,也就是on语法 一个标签对象相同的事件类型,只能赋值绑定 一个事件处理函数,如果赋值绑定多个事件处理函数,后赋的事件处理函数会覆盖之间存储的事件处理函数
事件绑定的三要素
标签对象 事件源 也就是绑定事件的标签对象
'click' 事件类型 也就是绑定给标签对象的事件的类型
function(){} 事件处理函数 也就是触发事件时执行的函数程序
是回调函数语法形式,可以是函数名称,也可以是匿名函数
二、事件的删除语法
1.on语法绑定事件的删除
因为 on语法是 = 等于赋值操作，只要赋值一个 null / 空函数，触发事件时就没有调用执行的函数程序达到删除事件的效果
2.事件监听语法的删除
需要专门的删除函数方法：标签对象.removeEventListener('事件类型',事件处理函数);
只能删除绑定的是函数名称的事件处理函数，如果绑定的是匿名函数，不能删除
注意：
实际操作中，如果不需要删除事件处理函数，推荐使用匿名函数语法形式
实际操作中，如果必须要删除事件处理函数，只能绑定函数名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是div标签对象</div>
<button>绑定</button>
<button>删除</button>
<script>
//获取标签对象
var oDiv = document.querySelector('div');
var oBtn1 = document.querySelectorAll('button')[0];
var oBtn2 = document.querySelectorAll('button')[1];
oBtn1.addEventListener('click', function () {
//on语法绑定事件
//oDiv.onclick = function(){console.log(111)};
//事件监听语法绑定
//绑定的匿名函数
oDiv.addEventListener('click', function () { console.log(111) });
//绑定的函数名称
oDiv.addEventListener('click', funA);
oDiv.addEventListener('click', funB);
oDiv.addEventListener('click', funC);
})
//删除绑定的事件
oBtn2.addEventListener('click', function () {
//删除on语法绑定的事件
//oDiv.onclick = null;
//oDiv.onclick = function(){};
//绑定的匿名函数无法删除，因为两个匿名函数内存地址不同
//假设绑定的内存地址是 00ff11
//删除的内存地址可能是 00ffzz
//不能设定正确的删除的内存地址
oDiv.removeEventListener('click', function () { console.log(111) });
//绑定的是函数名称,函数名称中存储的是内存地址
//以下可以删除
oDiv.removeEventListener('click', funA);
oDiv.removeEventListener('click', funB);
oDiv.removeEventListener('click', funC);
});
function funA() {
console.log('aaa');
}
function funB() {
console.log('bbb');
}
function funC() {
console.log('ccc');
}
</script>
</body>
</html>三、默认事件
默认事件是html标签默认执行的程序效果
有：超链接的点击跳转，form标签的点击跳转，鼠标右键
阻止默认事件
事件处理函数中定义一个形参 形参名称一般是 e / event
标签对象.addEventListener('事件类型' , function( e / event ){
// 阻止默认事件执行
形参.prevenDefault();
})
超链接
给 超链接标签 添加 点击事件
form标签
给 form标签 添加 submit 提交事件
鼠标右键
给 document 添加 contextmenu 鼠标右键事件
四、阻止事件的传播
父级标签和后代标签添加了相同类型的事件，后代标签触发事件父级标签也会触发相同类型的事件，这样的执行原理称为事件的传播或者冒泡事件
阻止事件的传播语法
标签对象.addEvenListener(事件类型,function(e/event){
e.stopPropagation();
})
事件传播的方式
之前 旧版本 中 事件的传播方式有两种
冒泡 子级 --- 父级
捕获 父级 --- 子级
现在 新版本 浏览器中 默认只有 冒泡方式 没有 捕获方式
事件监听语法绑定 事件处理函数
参数3 如果设定 为 true 事件的传播 执行 捕获方式
五、常见的事件类型
1. window相关的事件类型
1.1 浏览器视窗窗口大小监听事件
window.addEventListener( 'resize' ,function(){} )
1.2 页面滚动监听事件
window.addEventListener( 'scrool',function(){} )
1.3 浏览器加载事件
window.addEventListener( 'load',function(){})
1.5 新窗口打开url连接
window.open(url地址)
1.6 关闭当前窗口
window.close()
2. 鼠标相关的事件类型
click 鼠标左键单击
dblclick 鼠标左键双击
contextmenu 鼠标右键单击
mousedown 鼠标按键按下
mouseup 鼠标按键抬起
mousemove 鼠标移动
mouseover 鼠标移入 mouseenter
mouseout 鼠标移出 mouseleave
3. 键盘相关的事件类型
keydown 键盘按键按下
keyup 键盘按键抬起
keypress 键盘按键按下
4. 表单相关事件
submit 表单提交事件
focus 标签获取焦点
blur 标签失去焦点
change 标签失去焦点同时数据改变
input 输入数据
5. 移动端事件
touchstart 触摸开始
touchend 触摸结束
touchmove 触摸移动
6. 特殊事件
transitionstart 过渡开始
transitionend 过渡结束
animationstart 动画开始
animationend 动画结束
一定是绑定事件的标签 也就是 事件源 范围内 才能触发事件
全屏触发事件 需要给
document
document.documentElement
document.body
绑定事件
有些事件都能支持， 有些事件只有某个对象支持
六、事件对象
事件对象(event),事件处理函数中参数存储的数据数值，是触发事件的对象
触发事件的对象和绑定事件的不一定是同一个对象
触发事件时 JavaScript程序 自动向形参中存储实参
也就是 向 事件对象 中 自动储存 触发事件的标签对象 相关的数据信息
事件源.addEventListener(事件类型,function(时间对象){})
事件对象.target
存储的是触发事件的标签对象
支持所有DOM操作语法
七、事件委托语法
不是直接给标签对象绑定事件，而是给父级标签绑定事件，通过事件对象.target判断触发事件的不同的标签对象，执行不同的函数程序
标签对象.target 就是一个DOM标签对象
标签对象.target.tagName 是大写英文字符的标签名称
标签对象.target 执行DOM操作，判断点击的是什么标签
如果有div标签包含span标签 h1标签 a标签 p标签 ，给各标签添加不同的点击事件
一般是获取每一个标签对象，绑定点击事件，阻止事件的传播
实际操作中，只要根据不同的条件，触发不同的if判断，执行不同的程序，就OK了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
我是div标签对象<br>
<span>我是span标签</span>
<h1 id="h1">我是h1标签</h1>
<a href="JavaScript:;">我是a标签</a>
<p>我是p标签</p>
</div>
<script>
// 事件委托
// 给父级div标签添加点击事件
// 通过 事件对象.target 判断 触发事件的是什么标签
// 根据不同的标签 触发执行不同的程序
var oDiv = document.querySelector('div');
oDiv.addEventListener('click' , function(e){
// 事件委托 点击事件会触发
// 触发事件标签 标签名称是 div 证明点击的是div标签
if( e.target.tagName === 'DIV' ){
console.log( '您点击的是div标签' );
}else if( e.target.tagName === 'SPAN' ){
console.log( '您点击的是span标签' );
}else if( e.target.id === 'h1' ){
console.log( '您点击的是h1标签' );
}else if( e.target.getAttribute('href') === 'JavaScript:;' ){
console.log( '您点击的是a标签' );
}else if( e.target.innerHTML === '我是p标签' ){
console.log( '您点击的是p标签' );
}
});
</script>
</body>
</html>分别点击各标签，执行结果如下：
