事件周期
- 事件捕获
dom对象从最外层开始，逐层向下记录每一个dom对象上有没有绑定该事件，如果有记录下来
执行顺序：从外层向内层 直到目标元素截止
- 事件目标 事件触发
目标元素的事件触发
- 事件冒泡
从目标元素开始，逐层向上冒泡触发（捕获阶段记录的绑定的事件）
执行顺序：由内向外
1，当祖先元素和后代元素都绑定的相同的事件时，后代元素的事件触发，祖先的元素的事件也会触发
2，祖先元素的事件，后代元素也可以触发（后代元素没有绑定该事件）
事件监听：
el.addEventListener(‘事件名‘,fn[,true/false]);
第三个：是否在捕获阶段就提前触发 默认是false
如何阻止事件冒泡
dom标准： 事件对象下调用一个方法就可以阻止 e.stopPropagation()ie下 e.cancelBubble = true;
兼容性写法： if(e.stopPropagation){ e.stopPropagation() }else{ e.cancelBubble = true; } 三目 e.stopPropagation?e.stopPropagation():e.cancelBubble = true; try..catch() try{ e.stopPropagation(); }catch(){ e.cancelBubble = true; }
阻止默认事件
e.preventDefault()
事件委托
原理：利用事件冒泡，将子元素执行执行的事件，添加到父元素上，委托父元素执行
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> ul{ border:1px solid #000000; } li{ height:30px; background: lightcoral; margin-top:10px; width:200px; } </style> </head> <body> <ul id="list"> <li>1</li> </ul> <script> var arr=[1,2,3,4,5]; var arr2=["a","b","c",‘d‘,‘e‘]; var list = document.getElementById("list"); var str = ""; for(var i=0;i<arr.length;i++){ str += "<li index="+i+">"+arr[i]+"</li>" } console.log(str); list.innerHTML = str; //获取 li list.onclick = function(ev){ var e =ev||event; var target = e.target||e.srcElement;
if( target.nodeName == ‘LI‘ ){ var index =parseInt(target.getAttribute(‘index‘)); alert(arr2[index]); } } </script> </body></html>?
如何获取目标元素
target属性 保存了目标元素 DOM标准
srcElement属性 IE
兼容： var target = e.target || e.srcElement;
原文地址：https://www.cnblogs.com/cxf1214/p/11432389.html
时间： 2024-10-11 17:34:36