js的事件委托
什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。
好处:
1,提高性能
我们可以看一个例子:需要触发每个li来改变他们的背景颜色。
<ul id="ul">
<li id="1">001</li>
<li id="2">002</li>
<li id="3">003</li>
<li id="4">004</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 id="1">001</li>
<li id="2">002</li>
<li id="3">003</li>
<li id="4">004</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);
}
}
js的事件委托的更多相关文章
- 对JS中事件委托的理解
什么是事件委托: 事件委托——给父元素绑定事件,用来监听子元素的冒泡事件,并找到是哪个子元素的事件.(不理解冒泡的可以去百度下) 定义:利用事件冒泡处理动态元素事件绑定的方法,专业术语叫事件委托. 使 ...
- Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...
- JS:事件委托
事件委托 事件流 事件流描述的是从页面中接收事件的顺序.---JS高级程序设计(第3版) DOM Level 2 Events规定的事件流有三个阶段:①事件捕获阶段.②处于目标阶段.③事件冒泡阶段 事 ...
- js 利用事件委托解决mousedown中的click
有一个需求是这样的: 父元素div绑定一个mousedown事件,子元素a绑定一个click事件. 看解构: <div id="nav"> <a href=&qu ...
- js的事件委托机制
如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...
- js 使用事件委托
想象一下,如果你有一个无序列表,里面有一堆<li>元素,每一个<li>元素都会在点击的时候触发一个行为.这个时候,你通常会在每一个元素上添加一个事件监听,但是如果当这个元素或者 ...
- js实现事件委托
事件委托的概念: 事件委托就是利用事件冒泡,把事件加到父元素或祖先元素上,触发执行效果. 事件委托的写法: btn6.onclick = function(event){ event = event ...
- JS 的事件委托机制
以前写上图所示的鼠标点击触发事件,一般都是用如下所示的给每一个表示列表的标签绑定一个click事件(演示用的例子的框架是React): 毫无疑问,这样是比较繁琐的,以后维护修改改个函数名什么的还不方便 ...
- js和jquery中的事件委托
[转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...
随机推荐
- 114 的 dns 的解析测试
114 的 dns 号称使用 BGP Global AnyCast 技术多点部署 的方式, 可以将用户请求导向到"就近"的服务器,理论上是可以得到域名网络就近解析的IP的,所以将 ...
- Python Day02
Python 代码执行流程: 编译 --> 执行 源代码 --> 字节码 --> 机器码 --> CPU执行 python 先将自己的源代码,编译成Python 字节 ...
- Hibernate1
计应134(实验班) 杨伟 Hibernate的核心接口一共有6个,分别为:Session.SessionFactory.Transaction.Query.Criteria和Configuratio ...
- 常用OpenLDAP命令
ldappasswd -x -D "cn=Manager,dc=clouderachina,dc=com" -W "uid=mis,ou=Group,dc=clouder ...
- python2.7安装matplotlib遇到的问题及解决方法
python2.7下import matplotlib报错 第一个报错是:缺少这个pyparsing-2.1.4.win32-py2.7.exe 直接下载安装就行 第二个报错是:缺少cycler 这个 ...
- Android Fragment
1.Fragment必须是依存与Activity而存在的,因此Activity的生命周期会直接影响到Fragment的生命周期. 2.Fragment 生命周期: 首页 最新文章 在线课程 业界 开发 ...
- Manjaro mirror in china
1, mirrot file: /etc/pacman.d/mirrorlist Server = http://mirrors.ustc.edu.cn/manjaro/stable/$repo/$a ...
- Command Pattern
当(客户)对象访问(服务)请求服务时,最直接的方法就是方法调用.
- css:writing-mode属性
writing-mode属性 实现文字垂直排版 下面是css3语法: /* 关键字值 */ writing-mode: horizontal-tb; /* 默认值 */ writing-mode: v ...
- C语言程序设计第5堂作业
一.本次课学习主要内容及知识结构点: 二.实验内容:(60分) 1. 求奇数和.输入一批正整数(以零或负数为结束标志),求其中的奇数和.试编写相应程序. 2. 展开式求和.输入一个实数 x,计算并输出 ...