本文目录一览：
JS-阻止冒泡事件与事件委托
事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。
1.标准写法：利用事件对象里面的 stopPropagation()方法
e.stopPropagation()
2.非标准写法：IE 6-8 利用事件对象 cancelBubble 属性
e.cancelBubble = true;
事件委托也称为事件代理， 在 jQuery 里面称为事件委派。 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
如：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器，这里只操作了一次 DOM ，提高了程序的性能。
细说什么是js中的事件冒泡和事件捕获以及事件委托
如下一段代码：有2个div，外部是div1，内部是div2，
div id=”div1″ onclick=”alert(‘1’)”
div id=”div2″ onclick=”alert(‘2’)”
test
/div
/div
假设在div2内部进行点击，那么：冒泡事件认为：你点击了div2，而div2在div1里内部，所以，也点击了div1，因此执行顺序是 “div2-div1-body” ，由内往外一步步向上，这很像水里有一个鱼吐了一个水泡，这个水泡往上飘一样，所以叫做“冒泡事件”
而事件捕获认为：你点击div2，因为div1在div2外部，所以，div1先捕获到，然后再传递给div2，所以，事件执行顺序是“body-div1-div2”，这就像你进去房间，必须先进入大院，再进入门一样。
其实，2个都有一定的道理，目前，泡沫事件更合理，所以浏览器默认使用冒泡顺序，但是可以通过JS参数设置到底是用冒泡还是捕捉。
javascript 中的事件委派的作用是什么
所谓事件委托，就是让一个下属分别干的事情交给上司办了。比如说，鼠标点击事件，本来页面上有很多的鼠标点击事件，需要一个个的去写实现函数，但是如果你把鼠标点击事件交个上司来完成，那么就是你鼠标点击那里的时候，就相当于上司找对应的下属来完成此事件，而不像前面的一个个的去找实现函数。很简单的例子就是给ul中的li加事件：
ul id=”ul1″
li111/li
li222/li
li333/li
li444/li
/ul
如果给每个li添加点击事件：
var li=document.getElementsByTagName(‘li’);
for(var i=0;ili.length;i++)
alert(li[i].innerHTML);
要是用事件委托
var ul=document,getElementById(‘ul1’)
var target = ;ul.target || ul.srcElement; //兼容处理
alert(target,innerHTML);
这样做的好处就是不在进行查询，减少了DOM操作，极大地改善了代码性能。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/253151.html
微信扫一扫 
支付宝扫一扫 