JavaScript中的事件委托及好处


Posted in Javascript onJuly 12, 2016

1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。

好处呢:1,提高性能。

我们可以看一个例子:需要触发每个li来改变他们的背景颜色。

<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul> 
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function(){
this.style.background = "red";
}
aLi[i].onmouseout = function(){
this.style.background = "";
}
}
}

这样我们就可以做到li上面添加鼠标事件。

但是如果说我们可能有很多个li用for循环的话就比较影响性能。

下面我们可以用事件委托的方式来实现这样的效果。html不变

window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
/*
这里要用到事件源:event 对象,事件源,不管在哪个事件中,只要你操作的那个元素就是事件源。
ie:window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
}

好处2,新添加的元素还会有之前的事件。

我们还拿这个例子看,但是我们要做动态的添加li。点击button动态添加li

如:

<input type="button" id="btn" />
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul>

不用事件委托我们会这样做:

window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
for(var i=0; i<aLi.length; i++){
aLi[i].onmouseover = function(){
this.style.background = "red";
}
aLi[i].onmouseout = function(){
this.style.background = "";
}
}
oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi);
}
}

这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。

因为点击添加的时候for循环已经执行完毕。

那么我们用事件委托的方式来做。就是html不变

window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi);
}
}

ok:

如同在我们用微博中,新发微博照样有之前的鼠标事件。

以上所述是小编给大家介绍的JavaScript中的事件委托及好处,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
原生js实现class的添加和删除简单代码
Jul 12 #Javascript
JavaScript动态添加事件之事件委托
Jul 12 #Javascript
html+js实现简单的计算器代码(加减乘除)
Jul 12 #Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 #Javascript
javascript加减乘除的简单实例
Jul 12 #Javascript
浅谈javascript中的加减时间
Jul 12 #Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 #Javascript
You might like
php下过滤HTML代码的函数
2007/12/10 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
深入apache host的配置详解
2013/06/09 PHP
学习php中的正则表达式
2014/08/17 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
关于PhpStorm设置点击编辑文件自动定位源文件的实现方式
2020/12/30 PHP
jquery text()要注意啦
2009/10/30 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
JS常用表单验证方法总结
2014/05/22 Javascript
js 判断图片是否加载完以及实现图片的预下载
2014/08/14 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
Python下使用Psyco模块优化运行速度
2015/04/05 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
Linux常见面试题
2013/03/18 面试题
大学生素质拓展活动方案
2014/02/11 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
大一新生期末自我评价
2014/09/12 职场文书
党的群众路线教育实践活动制度建设计划方案
2014/10/31 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python