DOM - DOM事件高级
1. 注册事件（绑定事件）
给元素添加事件，称为注册事件或绑定事件。
有两种方式：传统方式和方法监听注册方式
1.1 传统方式注册
- 利用on开头的事件 onlick
- btn.onclick = function() {}
- 特点：注册事件的唯一性
- 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
<button>传统注册事件button><button>方法监听注册事件button><script>var btns = document.querySelectorAll('button');//唯一性原则，只会弹出1，不会弹出hi~btns[0].onclick = function() {alert('hi~');}btns[0].onclick = function() {alert('1'); }script>
1.2 方法监听注册方式
- W3C标准 推荐
- addEventListener() 是一个方法
- IE9之前的IE不支持，可以用attachEvent() 代替
- 特点：同一个元素同一个时间可以注册多个监听器
- 按注册顺序依次执行
1）addEventListener 事件监听方式（IE9以上）
eventTarget.addEventListener(type, listener[ , useCapture])
将指定的监听器注册到evevtTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
| 参数 | 说明 |
|---|---|
| type | 事件类型字符串，比如click、mouseover，注意这里不要带on |
| listener | 事件处理函数，事件发生时，会调用该函数 |
| useCaption | 可选参数，是一个布尔值，默认是false |
<button>传统注册事件button><button>方法监听注册事件button><script>var btns = document.querySelectorAll('button');//1. 传统方式注册事件//唯一性原则，只会弹出1，不会弹出hi~btns[0].onclick = function() {alert('hi~');}btns[0].onclick = function() {alert('1');}//2. 事件侦听注册事件 里面的事件类型是字符串，必须加引号，而且不带on//先弹出22，再弹出33btns[1].addEventListener('click', function() {alert(22);})btns[1].addEventListener('click', function() {alert(33);})script>
2）attachEvent 事件监听方式（非标准）
eventTarget.attachEvent(evevtNameWithOn, callback)
将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。
该方法接收的两个参数：
| 参数 | 说明 |
|---|---|
| eventNameWithOn | 事件类型字符串，比如onclick、onmouseover，这里要带on |
| callback | 事件处理函数，当目标触发事件时回调函数被调用 |
2. 删除事件（解绑事件）
1. 传统注册方式
eventTarget.onclick = null;
2. 方法监听注册方式
eventTarget.removeEventListener(type, listener[ , useCaption]);eventTarget.datachEvent(eventNameWithOn, callback);
<div>1div><div>2div><div>3div><script>var divs = document.querySelectorAll('div');divs[0].onclick = function() {alert(11);//1. 传统方式删除事件divs[0].onclick = null;}//2. removeEventListener 删除事件divs[1].addEventListener('click', fn)function fn() {alert(22);divs[1].removeEventListener('click', fn);}//3. eventTarget.datachEvent(eventNameWithOn, callback);divs[2].attachEvent('onclick', fn1);function fn1() {alert(33);divs[2].detachEvent('onclick', fn1);}script>
3. DOM事件流
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。
DOM事件流分为三个阶段：
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
- 事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
- 事件捕获：由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程
注意：
- JS代码中只能执行捕获或者冒泡其中的一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener(type, listener[ , useCaption])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认是false），表示在事件冒泡阶段调用事件处理程序
- 实际开发中很少用事件捕获，更关注事件冒泡
- 有些事件是没有冒泡的，如onblur、onfocus、onmouseenter、onmouseleave
<style>.father {overflow: hidden;width: 300px;height: 300px;margin: 100px auto;background-color: pink;text-align: center;}.son {width: 200px;height: 200px;margin: 50px;background-color: purple;line-height: 200px;color: #fff;}style>
head><body><div class="father"><div class="son">son盒子div>div><script>//dom事件流 三个阶段//捕获阶段//第三个参数是true则处于捕获阶段 document -> html -> body -> father -> sonvar son = document.querySelector('.son');son.addEventListener('click', function() {alert('son');}, true);var father = document.querySelector('.father');father.addEventListener('click', function() {alert('father');}, true);//冒泡阶段 //第三个参数是false或者省略，则处于冒泡阶段 son -> father -> body -> html -> documentvar son = document.querySelector('.son');son.addEventListener('click', function() {alert('son');}, false);var father = document.querySelector('.father');father.addEventListener('click', function() {alert('father');}, false);document.addEventListener('click', function() {alert('document');})script>
body>
4. 事件对象
<div>123div><script>var div = document.querySelector('div');//1. event是事件对象，写到侦听函数的小括号里面//2. 事件对象只有有了事件才会存在，他是系统自动创建的，不需要我们传递参数//3. 事件对象是我们事件的一系列相关数据的集合，跟事件相关的：比如鼠标点击里面包含了鼠标的相关信息、鼠标坐标；//键盘事件包含键盘事件的信息，如按下了哪个键 //4. 事件对象可以自己命名，如event、evt、e等//5. 有兼容性问题，ie678通过window.eventdiv.onclick = function(event) {console.log(event);}div.addEventListener('click', function(e) {console.log(e);})script>
事件对象常见属性和方法：
| 事件对象属性方法 | 说明 | 是否标准 |
|---|---|---|
| e.target | 返回触发事件的对象 | 标准 |
| e.srcElement | 返回触发事件的对象 | 非标注 |
| e.type | 返回事件的类型，比如 click、mouseover 不带on | |
| e.cancelBubble | 返回事件的类型 | 非标注 ie678使用 |
| e.returnValue | 该属性阻止默认事件（默认行为） | 非标准，比如不让链接跳转 |
| e.preventDefault() | 该方法阻止默认事件（默认行为） | 标准，比如不让链接跳转 |
| e.stopPropagation() | 阻止冒泡 | 标准 |
5. 阻止事件冒泡
5.1 阻止事件冒泡的两种方式
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。
阻止事件冒泡
- 标准写法：利用事件对象里面的 stopPropagation() 方法
e.stopPropagation() - 非标准写法：IE6-8利用事件对象cancelBubble属性
5.2 阻止事件冒泡的兼容性解决方案
if(e && e.stopPropagation) {e.stopPropagation;
} else {window.event.cancelBubble = true;
}
6. 事件委托（代理、委派）
事件委托也称为事件代理，在jQuery里面称为事件委派。
原理：
不是每个子节点单独设置监听事件，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
例如： 给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。
作用：
只操作了一次DOM，提高了程序的性能。
<body><ul><li>知否知否，点我应有弹框在手！li><li>知否知否，点我应有弹框在手！li><li>知否知否，点我应有弹框在手！li><li>知否知否，点我应有弹框在手！li><li>知否知否，点我应有弹框在手！li>ul><script>// 事件委托的核心原理： 给父节点添加侦听器，利用事件冒泡影响每一个子节点var ul = document.querySelector('ul');ul.addEventListener('click', function(e) {// alert('123');// e.target可以得到点击的对象e.target.style.backgroundColor = 'pink';})script>
body>
7. 常用的鼠标事件
7.1 常用的鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
1. 禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。
document.addEventListener('contextmenu', function(e) {e.preventDefaule();
})
2. 禁止鼠标选择 （selectstart 开始选择）
document.addEventListener('selectstart', function(e) {e.preventDefaule();
})
7.2 鼠标事件对象
event对象代表事件的状态，跟事件相关的一系列信息的集合。
现阶段主要用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
| e.pageX | 返回鼠标相对于文档页面的X坐标 IE9+支持 |
| e.pageY | 返回鼠标相对于文档页面的Y坐标 IE9+支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
8. 常用键盘事件
8.1 常用键盘事件
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键被按下时触发 。但是它不识别功能键，如 ctrl、shift、箭头等 |
注意：
- 如果使用addEventListener不需要加on
- onkeypress 不识别功能键，如 ctrl、shift、箭头等
- 三个事件的执行顺序：keydown – keypress – keyup
8.2 键盘事件对象
| 键盘事件对象属性 | 说明 |
|---|---|
| keyCode | 返回该键的ASCII值 |
注意：
onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
实际开发中更多使用onkeydown 和 onkeyup ，因为它们可以识别所有键。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！