直接事件与事件委托

最近学了JQ 刚刚在网上看了点关于直接事件与事件委托的知识:

比如:这样两段代码:

$(‘ul li‘).on(‘click‘, function () {
   //todo
});
$(‘ul‘).on(‘click‘,‘li‘, function () {
    //todo
})

他们的区别是什么呢?在JQuery的官网上有详细的解释,第一段是说把事件直接绑定在li上,如果有100个li,就相当于绑定了100次的li,而且只能绑定在文档中已存在的li上,

后续添加的li是绑定不上的,比如通过ajax添加去的新的li,这就是直接事件绑定。

第二段是委托事件,只绑定了一次事件在li上,也可以监听到后续添加的li。

时间: 2024-12-05 18:25:23

直接事件与事件委托的相关文章

JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: JavaScript版本: DOM0事件不支持委托链 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="C

jQuery事件绑定和委托实例

本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: 复制代码代码如下: $("#div1").click(function() {      alert("点击后触发");  }); 上面的事件绑定,我们可以通过多种方式去实现: 1. on() 复制代码代

事件, 事件流, 事件委托

事件 : 一. 事件驱动程序的(三要素):          1. 事件 : javascript捕获用户的操作或是页面中的行为(如 : onclick, onmouseover, keydown等等)               2. 事件源 : 触发这个事件的元素(如 : 一个按钮, 一个按键等等) 3. 事件处理程序 : 为该事件被触发时所执行的程序,也称为"事件句柄"和"事件监听器" 二. 绑定事件(有兼容性问题) 1. 在 IE 中,给一个对象的同一事件添

委托、Lambda表达式、事件系列04,委托链是怎样形成的, 多播委托

在"委托.Lambda表达式.事件系列01,委托是什么,委托的基本用法,委托的Method和Target属性"中,反编译委托,发现委托都是多播委托. 既然委托是多播委托,我们可以通过"+="把多个方法赋给委托变量,这样就形成了一个委托链, 它是怎样形成的?来看下面的例子: namespace ConsoleApplication3 { internal delegate void MySayDel(string msg); class Program { stati

编写高质量代码改善C#程序的157个建议[C#闭包的陷阱、委托、事件、事件模型]

前言 本文已更新至http://www.cnblogs.com/aehyok/p/3624579.html .本文主要学习记录以下内容: 建议38.小心闭包中的陷阱 建议39.了解委托的实质 建议40.使用event关键字对委托施加保护 建议41.实现标准的事件模型 建议38.小心闭包中的陷阱 首先我们先来看一段代码: class Program { static void Main(string[] args) { List<Action> list = new List<Action

HTML 事件(三) 事件流与事件委托

本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4. HTML 事件(四) 模拟事件操作[未发布] 目录 1. 事件流 1.1 何为事件流 1.2 事件流的三个阶段 1.3 addEventListener()注册事件流的阶段 1.4 阻止事件流的传播 2. 事件委托 2.1 何为事件委托 2.2 ul.li场景示例 2.3 JQuery的事件委托

JQ 为未来元素添加事件处理器—事件委托

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供了live().dalegate()和on()方法. 事件委托 我们知道,DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒泡到div和body(即document对象).因此

js事件代理(委托)

JavaScript事件代理(委托)一般用于以下情况: 1. 事件注册在祖先级元素上,代理其子级元素.可以减少事件注册数量,节约内存开销,提高性能. 2. 对js动态添加的子元素可自动绑定事件. 之前一直用各种js库的事件代理,如 jQuery,非常方便实用.今天尝试用原生 js 实现该功能. 1 var addEvent = (function () { 2 if (document.addEventListener) { 3 return function (element, type, h

事件代理和委托学习

参考资料: 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流 JavaScript事件代理和委托 事件委托: 实际案例:我们平时在开发时,有这种情况,一个ul里有有好多个li子元素,这个li的数量可以是固定的,也可以是动态添加删除的,而且每个li都必要有一个点击事件, <ul class= 'list'> <li class='item1'>item1</li> <li class='item2'>item2</li> <li class