js事件委托
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbb</li>
<li>ccccccccc</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 = "";
}
}
}
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 = "";
}
}
}
<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);
} }
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);
}
}
on()
函数用于为指定元素的一个或多个事件绑定事件处理函数。
on()
支持直接在目标元素上绑定事件,也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下,即使是执行on()
函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。
此外,该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
用法一:
jQueryObject.on( events [, selector ] [, data ], handler )
用法二:
jQueryObject.on( eventsMap [, selector ] [, data ] ) events:String类型,一个或多个用空格分隔的事件类型,例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap:Object类型,一个Object对象,其每个属性对应事件类型和可选的命名空间(参数events
),属性值对应绑定的事件处理函数(参数handler
)。
selector:可选/String类型,一个jQuery选择器,用于指定哪些后代元素可以触发绑定的事件。如果该参数为null
或被省略,则表示当前元素自身绑定事件(实际触发者也可能是后代元素,只要事件流能到达当前元素即可)。
data:可选/任意类型,触发事件时,需要通过event.data传递给事件处理函数的任意数据。
handler:Function类型,指定的事件处理函数。
<ul>
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul>
<button>add li</button>
<script>
$('button').click(function () {
$('ul').append('<li>new li</li>');
});
$("ul").on('click','li',function () {
$(this).css('color','red');
})
</script>
js事件委托的更多相关文章
- JS事件委托学习(转)
JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件 <</</</</li></ ...
- JS事件委托的原理和应用
js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...
- js事件委托 jQuery写法
http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...
- 原生js事件委托(事件代理)方法扩展
原生js事件委托(事件代理)方法扩展: 通过Node底层原型扩展委托方法 /** * 事件委托方法 * @param eventName {string}:事件名称,如'click' * @param ...
- 彻底弄懂JS事件委托的概念和作用
一.写在前头 接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...
- js事件委托篇(附js一般写法和js、jq事件委托写法)
参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...
- js事件委托和jQuery事件绑定on , off , one , bind , unbind , die
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- js 事件委托 事件代理
JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...
- js事件委托或事件代理
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
随机推荐
- Nginx与Apache比较
Nginx特点:高性能epoll 异步非阻塞多个连接(万级别)可以对应一个进程 支持反向代理支持7层负载均衡静态文件.反向代理.前端缓存等处理方便支持高并发连接,每秒最多的并发连接请求理论可以达到 5 ...
- 数据结构与算法JavaScript (五) 串(经典KMP算法)
KMP算法和BM算法 KMP是前缀匹配和BM后缀匹配的经典算法,看得出来前缀匹配和后缀匹配的区别就仅仅在于比较的顺序不同 前缀匹配是指:模式串和母串的比较从左到右,模式串的移动也是从 左到右 后缀匹配 ...
- SQL Server 无法生成 FRunCM 线程。请查看 SQL Server 错误日志和 Windows 事件日志
1.IP地址配置不正确: 打开 Microsoft SQL Server 2005配置工具下的SQL Server Configuration Manager,选择MSSQLSERVER协议, 然后双 ...
- II7.0 发布 MVC 4.0 三个小问题记录
1,403.14-Forbidden Web 服务器被配置为不列出此目录的内容 根据提示更改:使用 IIS 管理器启用目录浏览. 打开 IIS 管理器. 在“功能”视图中,双击“目录浏览”. 在“目录 ...
- 关于JqueryEasyUI集合Kindeditor
写在前面 上一篇<初试JqueryEasyUI(附Demo)>: 在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor.ueditor.kindedito ...
- ORA-01439: 要更改数据类型, 则要修改的列必须为空
此方法有3处update操作,建议根据实际情况的数据量测试评估效率后选用. 思路:定义要更新数据类型的列为[col_old],数据类型为[datatype_old],临时列为[col_temp],数据 ...
- HP-UX 11g RAC安装 记录
环境:HP-UX 11.31 + GI 11.2.0.4 + Oracle 11.2.0.4 背景:本文只对HP-UX平台安装11g RAC环境过程中,针对一些跟Linux平台有差异的地方进行简单记录 ...
- 浅谈2D游戏设计模式--游戏剧情设计(1)
博主不才,人生有2大爱好,写程序和玩游戏,本人玩的又是一款2D的在旁人看来弱智的网络游戏. 这款游戏在中国的名称叫做冒险岛,不知道园子里有没有人玩过. 我打算有空的话,就把我玩游戏中的心得和程序结合起 ...
- struct 大小计算
结构体是一种复合数据类型,通常编译器会自动的进行其成员变量的对齐,已提高数据存取的效率.在默认情况下,编译器为结构体的成员按照自然对齐(natural alignment)条方式分配存储空间,各个成员 ...
- 为你带来灵感的 20 个 HTML5/CSS3 模板
1. Curve 2. Tapestry 3. Aqueous 4. Deliccio 5. Respond 1.5 6. Triangle Responsive 7. Design Company ...