js事件冒泡，事件捕捉，事件委托解析 |
您所在的位置：网站首页 › 事件捕获事件冒泡事件委托 › js事件冒泡，事件捕捉，事件委托解析 |
js事件冒泡，事件捕捉，事件委托解析
|
没有特别的幸运，那么就特别的努力！！！
1.事件冒泡和事件捕捉
1.使用W3C标准的addEventListener，FF和Chrome浏览器都支持，IE6/IE7/IE8都不支持这个函数。不过从IE9开始就支持了这个标准的API。
addEventListener((type, listener, useCapture) type=>事件（click） listener=>函数 useCapture=>来设定，useCapture=false代表着事件冒泡，useCapture=true代表着采用事件捕获。 事件冒泡=> 函数执行，从里向外执行 事件捕捉=> 函数执行，从外向里 window.onload = function(){ var outA = document.getElementById("outA"); var outB = document.getElementById("outB"); var outC = document.getElementById("outC"); // 使用事件冒泡 outA.addEventListener('click',function(){alert(1);},false); outB.addEventListener('click',function(){alert(2);},false); outC.addEventListener('click',function(){alert(3);},false); };使用的是事件冒泡，当点击outC的时候，打印顺序是3–>2–>1。如果将false改成true使用事件捕获，打印顺序是1–>2–>3。 2.阻止事件冒泡和捕获 1 2 3IE8以及以前可以通过 window.event.cancelBubble=true阻止事件的继续传播； IE9+/FF/Chrome通过event.stopPropagation()阻止事件的继续传播。 window.onload = function(){ var outA = document.getElementById("outA"); var outB = document.getElementById("outB"); var outC = document.getElementById("outC"); // 目标 outC.addEventListener('click',function(event){ alert("target"); event.stopPropagation(); },false); // 事件冒泡 outA.addEventListener('click',function(){alert("bubble");},false); // 事件捕获 outA.addEventListener('click',function(){alert("capture");},true); };当点击outC的时候，之后打印出capture–>target，不会打印出bubble。因为当事件传播到outC上的处理函数时，通过stopPropagation阻止了事件的继续传播，所以不会继续传播到冒泡阶段。 答疑——猜猜下面代码结果 window.onload = function(){ var outA = document.getElementById("outA"); var outB = document.getElementById("outB"); var outC = document.getElementById("outC"); // 目标 outC.addEventListener('click',function(event){alert("target");},false); // 事件冒泡 outA.addEventListener('click',function(){alert("bubble");},false); // 事件捕获 outA.addEventListener('click',function(){alert("capture");event.stopPropagation();},true); };执行结果是只打印capture 3.事件委托（提高性能） 1 2 3 4 //事件触发 var list = document.getElementById("list"); list .on("click",function(e){ console.log(e) var e = e || window.event; e.target = e.target || e.srcElement; var Li = e.target.nodeName.toLowerCase(); if(Li == "li"){ hideS(); console.log("进行查询") } })
|
【本文地址】
今日新闻 |
推荐新闻 |