传送：http://www.ituring.com.cn/article/467概念： 什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 举个列子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery完整的事件委托(on())</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(function () { $("#box").on("click","div,p,li,span",function (event) { if(event.target.nodeName.toLowerCase()=="div"){ //nodeName 元素节点名称 if(event.tar...
一：什么是事件委托？事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。二：为什么要用事件委托？1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。2.对有很多个数据的表格以及很长的...
这篇文章主要介绍了关于jquery事件委托如何使用，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一、总结一句话总结：通过on方法（事件委托），给要绑定事件的元素的祖先绑定事件，从而达到效果。1、事件委托是什么？通过事件冒泡，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行处理。 91 //使用事件委托，只在table上绑定一次事件 92 //可以动态绑定事件 93 $(table).on(click,td...
本文主要为大家详细介绍了jQuery动态追加页面数据以及事件委托的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。我们要执行的任务是页面起初有一部分图片，我们在底下有一个More Photos的链接，点击后，向当前页面后加载一部分图片，再点击该链接，继续加载，直到将我们列出的页面加载完成，此时该链接也消失了。首先效果图如下： 这个只截取了最底下的一部分页面。在鼠标悬停在图片上时，还会有...
本文主要为大家带来一篇浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。一、事件冒泡定义事件冒泡是指在一个对象触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象...
移动端用zepto做的页面，突然发现on绑定的click事件并没有触发，代码如下：<ul> <li class="a">1111111aaaaaaasssss</li> <li class="b">aaaaaaassssss</li> <li class="c">ssssssss</li> </ul> <script>$(document).on(click,.c,function(argument) { alert($(this).html()) }) </script>我把此写法改成非事件委托的方式，发现该click事件就能触发$(‘.a’).on(click,function(argument) { alert($(this).html()) })...
下面小编就为大家带来一篇JavaScript之事件委托实例(附原生js和jQuery代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧事件委托的原理依赖于事件冒泡，可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作。使用事件委托的优点1、操作子元素时不用一一遍历，可以根据事件触发的对象而进行相应操作dom结构如下：<ul id = "oUl"><li class = "item"></li><li class = "it...
考虑下面这种场景：如果1个p下面有3个button，点击每个按钮的时候，需要打印出当前按钮的ID。<p id="parent"><input type="button" id="a" value="1"></input><input type="button" id="b" value="2"></input><input type="button" id="c" value="3"></input> </p> 方式1：使用JQuery选择器，给每个按钮都绑定自己的事件处理函数。$("#parent :button").click(function(){alert($(this).attr("id")); }) 方式2：利用事件委托机制，...
一. 事件委托什么是事件委托？用现实中的理解就是：有100 个学生同时在某天中午收到快递，但这100 个学生不可能同时站在学校门口等，那么都会委托门卫去收取，然后再逐个交给学生。而在jQuery 中，我们通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行相关处理即可。如果一个企业级应用做报表处理，表格有2000 行，每一行都有一个按钮处理。如果用之前的.bind()处理，那么就需要绑定2000 个事件，就...
jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文在讨论这几个方法内部实现的基础上，展示它们的优劣势及适用场合。 事件委托 事件委托的事例在现实当中比比皆是。比如，有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件...
简单说下事件委托与阻止冒泡 html:全部 纽约 洛杉矶 拉斯维加斯 夏威夷 旧金山 奥兰多 西雅图 js:$("ul[data-type='cityPick']").on('click',function(){ alert("父元素ul被点击"); }); $("ul[data-type='cityPick']").on('click','li',function(){ alert("子元素li被点击"); });当点击具体的li元素时，发现ul的事件也被触发了，这是我们不想看到的。 解决：$("ul[data-type='cityPick']").on('click',function(){ al...
事件委托主要是利用事件冒泡现象来实现的，对于事件委托的精准的掌握，可以有利于提高代码的执行效率。先看一段代码实例:脚本之家table{width:300px;height:60px;background-color:green; } table td{background-color:white; }$(document).ready(function(){$("td").bind("click",function(){$(this).text("哈哈");}) })单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格在以上代码中，使用bind()方法为每一个td绑定...
首先，大家都知道，jQuery事件触发时有2种机制，一种是事件委托，另一种是事件冒泡（IE情况暂时不考虑）。拿click事件做例子，先附上一段代码： html：我是按钮style: .hid{display:none; }script：$('#box').click(function(){$(‘#btn').toggleClass(‘hid'); }) $('#btn').click(function(){alert('btn'); })这段代码的本意是，当我点击#btn的时候，我要alert出来“btn”字符串，而当我点击#box的时候，我要把#btn隐藏，但是，在...
javascript的事件模型，采用"冒泡"模式，子元素的事件会逐级向上"冒泡"，成为父元素的事件。 在需要为较多的元素绑定事件时应该使用事件委托 event delegation javascript事件传播html如下： <body> <table> <tr><td id="targetTd"></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </table> </body>添加脚本： targetTd.onclick = function (event) { console.log("Td is clicked"); }; document.body.onclick...