标签(空格分隔): 事件委托 冒泡 性能优化
序:
开启本文前,首先有几点要说明一下。
问题
1:添加到文档上的事件处理程序越多,页面整体运行性能越低。
2:每个函数都是对象,都要占内存,内存中的对象越多,性能越差,跑不动
3:页面一加载上来要事先指定DOM的事件处理程序,导致访问DOM的次数,进而延迟了整个文档的交互就绪时间。
所以:从以上的角度考虑:
解决
1》避免向页面中DOM添加大量的事件处理程序,限制了DOM和js建立连接的数量。利用委托,只是给某个祖级指定一个事件处理程序,来管理某一类的所有事件。例如:管理所有的点击。
2》对于即将移除的DOM,要手动移除其身上的事件处理程序。有些浏览器不会做只能处理释放掉,比如:通过innerHTML方式替换掉的元素。
方案一:利用委托
论证上边写的很清楚了,下面就是针对每个方案上一段代码吧。
HTML:
点击出弹窗
点击做跳转
CSS:
.con {
background: rgba(0, 0, 0, .2);
border: 1px solid #ff9;
}
.btn1, .btn2, .btn3 {
width: 300px;
height: 50px;
border: 1px solid #000;
text-align: center;
line-height: 50px;
cursor: pointer;
}
目标:
点击3个元素走不同的事件处理程序。
分析:
3个元素共同的祖级是类名叫.con的元素。所以把事件执行程序与他建立联系即可。而不是传统的给每个元素绑定一次事件处理代码。
实现:
JS:
window.onload = function () {
//1:获取DOM
var btn1 = document.querySelector('#btn1');
var btn2 = document.querySelector('#btn2');
var btn3 = document.querySelector('#btn3');
var con = document.querySelector('.con');
//2:事件委托
con.addEventListener('click', function (e) {
var e = e || event;
if (e.target.id == 'btn1') {
//换背景色
con.style.background = '#80B3FF';
}
if (e.target.id == 'btn2') {
//弹出目标的id
alert(e.target.id);
}
if (e.target.id == 'btn3') {
//做跳转
window.location.href = 'https://macrolam.github.io/MK/';
}
}, true)
}
===================================================
tip:
这里是通过事件对象的里的target对象里的id属性,当然这种在实际开发事使用较少,毕竟要给每个元素一个id,id甚是宝贵,不能乱来,所以,再看看通过其他方式选中你要操作的元素。普通元素还可以通过节点名(标签名),标签内容。表单元素还可以通过name属性,例如这里的button按钮。标签身上设置下name属性。js里根据这个属性去拿到对应DOM。
===================================================
通过其他方式拿到对应的DOM
1.标签名:
HTML:
点击出弹窗
点击做跳转
这里省略样式,和上边一致的。.con里的子只有标签名字。
JS:
window.onload = function () {
var btn1 = document.querySelector('button');
var btn2 = document.querySelector('p');
var btn3 = document.querySelector('h6');
var con = document.querySelector('.con');
con.addEventListener('click', function (e) {
var e = e || event;
if (e.target.nodeName.toLowerCase() == 'button') {
//换背景色
con.style.background = '#80B3FF';
}
if (e.target.nodeName.toLowerCase() == 'p') {
//弹出目标的id
alert(e.target.nodeName);
//二者是一致的
alert(e.srcElement.nodeName);
}
if (e.target.nodeName.toLowerCase() == 'h6') {
//做跳转
window.location.href = 'https://macrolam.github.io/MK/';
}
}, true)
}
e.target.nodeName拿到的是大写的标签名字,所以需要转换成小写好处理些。toLowerCase()一下就OK了。
2.标签内容:
HTML:
点击出弹窗
点击做跳转
JS:
window.onload = function () {
var con = document.querySelector('.con');
con.addEventListener('click', function (e) {
var e = e || event;
if (e.target.innerHTML == '点击我变色') {
//换背景色
con.style.background = '#80B3FF';
}
if (e.target.innerHTML == '点击出弹窗') {
//弹出目标的id
alert(e.target.nodeName);
//二者是一致的
alert(e.srcElement.nodeName);
}
if (e.target.innerHTML == '点击做跳转') {
//做跳转
window.location.href = 'https://macrolam.github.io/MK/';
}
}, true)
}
利用 e.target.innerHTML或者是e.target.innerText都可以。
3.表单标签的name属性:
如果是表单元素,还可以在表单元素上把name属性设置下。
HTML:
点击出弹窗
点击做跳转
JS:这里只是写按钮部分了。
con.addEventListener('click', function (e) {
var e = e || event;
if (e.target.name == 'fromDomBtn') {
//换背景色
con.style.background = '#80B3FF';
}
}
利用表单身上的属性name;即e.target.name
常规处理方式就是以上几种,可以根据你的代码选择合适的方案。
方案二:手动移除事件处理程序
如果心里清楚,哪些带有事件处理程序的元素将要被移除,那么最好手动置空他的事件处理程序,即切断了DOM和js之间的引用关系。如果直接对DOM进行增删改查中的“删”,即:removeChild()/replaceChild()等,是不需要咱们手动再置空他们身上原来的事件引用。因为前端的代码一般不需要我们进行内存管理、垃圾回收等操作,浏览器会帮我们做好。这里说的将要被移除是指通过innerHTML的方式替换达到删除的结果,此时就需要我们做点事了,因为一些浏览器不会很好的处理这一块,例如(IE);下边用代码演示下具体怎么实现:
HTML:
JS:
window.onload = function () {
var con = document.querySelector('.con');
var btn = document.querySelector('button');
const txt = ` Lorem ipsum dolor.
Error esse est illo impedit libero molestias, perspiciatis ratione repudiandae voluptate voluptatem!
`;
btn.onclick = function () {
btn.onclick = null;//点击进来后手动释放自身和事件处理程序的引用关系;用过一次就释放掉了
con.innerHTML = txt;
}
}
把这段代码,复制到你的编译器试试吧,点击事件肯定只会执行一次。
js库实现委托
如果你不是使用原生js,使用jQuery或是zepto等怎么做呢?更简单。直接上代码。
HTML片段截取:
![](/gameInfo/images/ban.jpg)
(点击了解详情)
由于jQuery/zepto里自带的事件注册on方法只能接受3个参数,所以对于第二个参数DOM;要好好利用下了,把需要的做同一件事的dom都附属一个类名叫:hrefTo的。OK。
//1:引入库
//2:点击banner/了解详情/下载按钮三处实现跳转
$('body').on('click','.hrefTo',function () {
window.location.href="https://www.baidu.com/";
});
----------------------------------------------------喜欢就动动小手哈。------------------------------------------------------
--------------------------------------你的支持是洒家-麦壳-macrolam前进的动力--------------------------------------