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 相关文章推荐
JS命名空间的另一种实现
Aug 09 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
原生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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
php转换上传word文件为PDF的方法【基于COM组件】
2019/06/10 PHP
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
AngularJS辅助库browserTrigger用法示例
2016/11/03 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python2与Python3的区别实例分析
2019/04/11 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
关于Django Models CharField 参数说明
2020/03/31 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
Python中用xlwt制作表格实例讲解
2020/11/05 Python
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
DJI大疆德国官方商城:大疆无人机
2018/09/01 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
护士检查书
2014/01/17 职场文书
五分钟演讲稿
2014/04/30 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
2014最新实习证明模板
2014/10/02 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
2014年内勤工作总结
2014/11/24 职场文书
开学第一周总结
2015/07/16 职场文书
2015年高中班级工作总结
2015/07/21 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android