本文实例讲述了JavaScript事件委托用法。分享给大家供大家参考。具体如下： var addEvent = function (elem, eventType, func) {if ( elem.addEventListener )addEvent = function (elem, eventType, func) {elem.addEventListener(eventType, func, false);};else if ( elem.attachEvent )addEvent = function (elem, eventType, func) {elem.attachEvent(on + eventType, func);};addEvent(elem, eventType, func); }; var deleg...
本文实例分析了JavaScript事件委托技术。分享给大家供大家参考。具体分析如下： 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差. 其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的. 事件委托： 对事件处理程序过多的问题解决的方案就是事件委托技术. 事件...
如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)了。使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。基本概念非常简单，但仍有很多人不理解事件委托的工作原理。这里我将要解释事件委托是如何工作的，并提供几个纯JavaScript的基本事件委托的例子。 假定我们有一个UL元素，...
jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文在讨论这几个方法内部实现的基础上，展示它们的优劣势及适用场合。 事件委托 事件委托的事例在现实当中比比皆是。比如，有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件...
在javascript中，事件委托就是利用冒泡的原理，将事件加到父元素或祖先元素上，触发执行效果。事件委托的优点：1、可以提高JS性能；2、可以动态添加DOM元素，不需要因为元素的变动而修改事件绑定。本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。1、什么是事件委托？事件委托就是利用冒泡的原理，将事件加到 父元素 或 祖先元素上，触发执行效果。例：在 document 中绑定 click 事件，当 click 的对象为 按钮 btn...
事件捕获事件捕获中，父级元素先触发，子集元素后触发 事件会从最外层开始，直到具体的元素，比如click的捕获过程document->html->body->div->p事件冒泡事件冒泡时，子元素先出发，父级元素后触发 元素自身事件被触发后，如果父元素有相同的事件，那么元素本身的触发状态就会传递，就是冒到父元素，父元素相同事件也会一级级向外触发 默认情况下，所有事件处理程序都是在冒泡阶段注册的 如果想早捕获阶段注册事件，通过addEventLis...
内存和性能 事件类型是在太多了，直接跳到事件内存和型能这里事件委托 由于事件冒泡的原理，可以只盯一个事件处理程序，用来管理一个类型的所有事件，比如click事件会一直冒泡到document层次，也就是说如果可以的话，整个页面指定一个onclick事件，而不必给所有元素分别添加事件处理程序 利用事件委托，再上级或者尽量高的DOM层次中添加一个事件处理程序，用来管理下级DOM的所有事件移除事件处理程序 由于在销毁DOM元素的时候并不会...
通过document的querySelectorAll方法，遍历所有a标签，给每个标签添加上点击事件。 缺点也很显而易见：一个是添加了太多的事件，这些都是同dom操作，影响了性能；另外一个是你只对a标签添加了事件，如果还需要对点击li标签做一些什么事情的话，还得另外再编写一个handler。 使用事件委托，我们可以轻易改善上面的代码。 对比第一次写的代码，这次在整个页面只有一个dom操作，因为只给了ul标签设置了事件监听器，利用了冒泡原理影响...
事件冒泡 IE的事件流叫做事件冒泡。顾名思义当事件发生后，事件就开始从里向外传播，查看下方代码： <html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><div id="myDiv"></div></body> </html>如果点击页面中的 <div> 元素，那么这个 chick 事件就会按照如下顺序传播：click 事件 在 直系DOM 树的每一级节点都会发生（自下而上），直到 document 对象。 事件委托 又称事件代理。对“事件处理程序过...
将有关特定操作的每个处理程序直接附加到目标元素的旧事件管理已过时,因为有关性能和内存节省的考虑因素已在开发人员社区中广泛传播. 自从jQuery用新的.on()方法更新了旧的.bind()和.live()方法以允许委派以来,事件委托实现有了加速. 这决定了某些经验丰富方法的改变,在这种情况下,使用事件委派是必要的.我试图制定一些最佳实践,同时保持库的编码风格,并寻找其他开发人员面临的类似情况以寻找答案. 通过将OOP与函数一起用作构造函数...
在JavaScript中我习惯使用这样的事件委托：someDiv.addEventListener('click', function(evt){if(evt.target.id == "#someChild"){// Do something..} else if(evt.target.id == "#anotherChild"){// Do something else..} }, false);在jQuery中这相当于什么？我知道.on()但是如何在事件委托中使用它？我的意思是这是怎么做到的：someDiv.on('click, '#someChild, #anotherChild", function(evt){if($(this).is("#someChild")){ //...
我需要一些回调的帮助.出于某种原因,它们并不能很好地发挥作用.我正在用jQuery制作游戏.我有一个< div id =button>< / div>对于将要在游戏中的所有按钮.游戏将有两个按钮来进行操作,并在其上面提出问题.该问题由< h3 id =text>< / h3>控制.我想知道的是,由于某种原因,我无法将回调函数设置为按钮的ID.在例子中,我有或者没有,它们通过jQuery设置了自己的id,如下所示： $(‘#button’).html(‘< button id =yes>是< / button>< butto...
我最近升级到hammer.js 2,我注意到的第一件事之一是“hold”已被“press”取代. 我的旧代码在事件委托方面运行良好,但是当我将它放在特定元素上时,切换到仅按下似乎有效. 注意：我通过jquery插件使用hammer.js Hammer.js 1$(element).hammer().on("hold",callback);工作良好$(rootElement).hammer().on("hold",".elementSelector",callback);工作良好 Hammer.js 2 这个$(element).hammer().on("press",callback);工作正常,而这$(ro...
http://jsbin.com/xaguxuhiwu/1/edit?html,js,console,output<div id="container"><button id="foo">Foo button</button><button id="bar">Bar button</button></div>$('#container').on('click', function(e) {var targetId = e.target.getAttribute('id');// Manually do event delegationif (targetId === 'foo') {var currentId = e.currentTarget.getAttribute('id');console.log('without delegation, currentTarget is: ' +...
JS中的事件委托和事件代理 什么是事件委托？ 事件委托还有一个名字叫事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。我用取快递来解释这个现象： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台代为签收。现实当中，我们大都采用委托的方案。前台收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至...