事件委托又叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

js:

window.onload = function(){
var oul = document.getElementById("ul1");
oul.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase()=="li"){
console.log(target.innerHTML);
}
}
}

jquery:

$(function(){
$("#lists").on("click","li",function(event){
var target = $(event.target);
target.css("background","red");
})
})

什么是事件委托?jquery和js怎么去实现?的更多相关文章

  1. js事件委托 jQuery写法

    http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...

  2. js事件委托篇(附js一般写法和js、jq事件委托写法)

    参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...

  3. 事件委托能够优化js性能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 事件委托&jQuery on

    例如: <h2>Great Web resources</h2> <ul id="resources"> <li><a hre ...

  5. JS与Jquery的事件委托——解决了绑定相同事件的问题

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

  6. JS与Jquery的事件委托

    参考:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...

  7. JS与Jquery的事件委托机制

    传送:http://www.ituring.com.cn/article/467 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委 ...

  8. 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...

  9. Jquery事件委托之Safari

    什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...

随机推荐

  1. RMAN备份脚本

      单机环境全备   export ORACLE_BASE=/oracle export ORACLE_HOME=$ORACLE_BASE/product/10.2.0/db_1 export ORA ...

  2. C#中Dictionary排序方式

    转载自:https://www.cnblogs.com/5696-an/p/5625142.html 自定义类: https://files.cnblogs.com/files/xunhanliu/d ...

  3. linux命令find命令详解

    find 查找文件 find 哪里 什么类型 什么名字 -maxdepth 最大的深度 查找目录的最大深度    find -maxdepth 1 -type d -type 找什么类型的 f fil ...

  4. Fragment的实际开发中总结(二)

    在实际项目的开发过程Fragment的情况越来越多.大家肯定须要遇到过Fragment被销毁重建的情况. 结合自己在项目开发的一点总结和学习开源项目的代码.继续分享自己对Fragment的一点总结. ...

  5. HDU 4714 Tree2cycle(树型DP)

    解题思路: 将一棵树变成一个环.假设一个结点的分叉数目大于等于2.则将它与父节点断开.而且断开子结点数目sum - 2条边,并再次连接sum-2个儿子形成一条直链然后这条游离链与还有一条游离链相连,共 ...

  6. 23. Angular 中用 a 标签 href 路由时在浏览器中显示异常 "%2F" 路由失败问题1

    这个是angular1.6默认给hash路由上添加了!(感叹号),导致出错,修改方法如下(添加配置,去掉默认前缀感叹号):   angular.module('routingDemoApp',['ng ...

  7. 13.ng-value

    转自:https://www.cnblogs.com/best/tag/Angular/ 绑定给定的表达式到input[select]或 input[radio]的值上 <input type= ...

  8. 6.控制器(ng-Controller)

    转自:https://www.cnblogs.com/best/tag/Angular/ ngController指令给视图添加一个控制器,控制器之间可以嵌套,内层控制器可以使用外层控制器的对象,但反 ...

  9. 2.AngularJS-验证

    转自:https://www.cnblogs.com/best/p/6225621.html 一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属 ...

  10. 将本地的代码上传到网上SVN库

    使用VisualSVN Server创建版本库: https://jingyan.baidu.com/article/db55b609f6aa724ba20a2f6c.html 最详细的教程: htt ...