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

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. 栈 <stack> F - 宋飞正传

    I’m out of stories. For years I’ve been writing stories, some rather silly, just to make simple prob ...

  2. php八大设计模式之适配器模式

    将一个抽象被具体后的结果转换成另外一个需求所需的格式. 在生活中也处处有适配器的出现,比如转换头,就是让两种不同的规格合适的搭配在一起. <?php header("content-t ...

  3. Centos7(阿里云服务器)安装Anaconda的详细步骤与心得

    在本地安装Anaconda的各个版本的文章已经很多,但是感觉不是很详细,因此,在此发发自己在Centos7(阿里云服务器)安装Anaconda的心得和步骤: 注:需要注意的地方会用不同颜色区别. 1. ...

  4. 今日SGU 6.6

    sgu 177 题意:给你一个一开始全是白色的正方形,边长为n,然后问你经过几次染色之后,最后的矩形里面 还剩多少个白色的块 收获:矩形切割,我们可以这么做,离散处理,对于每次染黑的操作,看看后面有没 ...

  5. 洛谷 P1294 高手去散步

    P1294 高手去散步 题目背景 高手最近谈恋爱了.不过是单相思.“即使是单相思,也是完整的爱情”,高手从未放弃对它的追求.今天,这个阳光明媚的早晨,太阳从西边缓缓升起.于是它找到高手,希望在晨读开始 ...

  6. HBase快照、Snapshots 淘宝快照

    淘宝在2011年之前所有的后端持久化存储基本上与我们所认知的意义,  大量存于 mysql .少量 oracle mongdb 等,使用mysql 的原因相信各位也很熟悉了.  开源.社区庞大.解决方 ...

  7. myeclipse2013 jsp编辑初始化

    首先,大家可能有过这种经历.双击打开jsp编辑.它默认会打开视图,这样就使人恼火了,卡死了.所以我们能够自己设jsp的默认打开方式:打开Window-->preferences得: 搜索edit ...

  8. [PostCss] Easily Load Google Fonts with PostCSS Font Magician

    Configuring Google Fonts can be quite an annoying process to setup. Using Font Magician with PostCSS ...

  9. HDU Victor and World (最短路+状态压缩)

    题目链接:传送门 题意: n个城市m条路.刚開始在点1,求把每一个城市都遍历一边最后回到1的花费的最小值. 分析: ​​+n​2​​∗2​n​​). 转自Bestcode. 以下说说我的状态转移,首先 ...

  10. 怎样使用纯CSS3创建一个简单的五角星图形

    我们能够使用SVG.Canvas.CSS3或者背景图片来实现五角星图案及其悬停效果. CSS3引入的伪元素和变换特性使得实现五角星图形很easy,而且能够结合渐变实现更为美丽的效果.因此使用图片实现五 ...