一、事件的绑定语法
语法形式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>分别点击各标签，执行结果如下：
