讲解之前先来讲讲性能.如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了.首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差.其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的.一、事件委托对事件处理程序过多的问题解决的方案就是事件委托技术.事件委托技术利用了事件冒泡.只需指定一个事件处理程序.我们可以...
本文为大家简单介绍了javascript事件委托的用法及其好处，供大家参考，具体内容如下 事件委托:利用冒泡的原理，把事件加到父级上，触发执行效果， 好处：提高性能，新添加的元素还会有之前的事件。 event对象：事件源，不管在哪个事件中，只要你操作的那个元素就是事件源 获取事件源： IE：window.event.srcElement 标准下：event.target target.nodeName来判断是哪个标签 代码应用如下：window.onload=function () {var oUl=doc...
jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文在讨论这几个方法内部实现的基础上，展示它们的优劣势及适用场合。 事件委托 事件委托的事例在现实当中比比皆是。比如，有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件...
如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)'了。使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。基本概念非常简单，但仍有很多人不理解事件委托的工作原理。这里我将要解释事件委托是如何工作的，并提供几个纯JavaScript的基本事件委托的例子。 假定我们有一个UL元素...
本文实例讲述了JavaScript事件委托用法。分享给大家供大家参考。具体分析如下： 一、点击页面任何部分触发事件 创建一个script1.js文件。代码如下:(function() {eventUtility.addEvent(document, "click", function(evt) {alert(hello);}); }()); 页面部分。代码如下:输出结果：点击页面任何一处都会弹出框。 但，我们有时候希望点击document内的某个元素来触发事件。 二、使用委托触发事件 在页面上增加a标签。代码如下:点我把scr...
本文实例分析了JavaScript事件委托技术。分享给大家供大家参考。具体分析如下： 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差. 其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的. 事件委托： 对事件处理程序过多的问题解决的方案就是事件委托技术. 事件...
本文实例讲述了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 dele...
事件委托主要是利用事件冒泡现象来实现的，对于事件委托的精准的掌握，可以有利于提高代码的执行效率。先看一段代码实例:脚本之家table{width:300px;height:60px;background-color:green; } table td{background-color:white; }$(document).ready(function(){$("td").bind("click",function(){$(this).text("哈哈");}) })单元格单元格单元格单元格单元格单元格单元格单元格单元格单元格在以上代码中，使用bind()方法为每一个td绑定...
本文实例分析了javascript性能优化之事件委托。分享给大家供大家参考，具体如下：为下面每个LI绑定一个click事件Go somewhereDo somethingSay hi一、传统写法var item1=document.getElementById("goSomewhere"); var item2=document.getElementById("doSomething"); var item3=document.getElementById("sayHi"); item1.onclick = function(){console.log(goSomewhere); } item2.onclick = function(){console.log(doSomething); }...
本文实例讲述了javascript事件监听与事件委托。分享给大家供大家参考，具体如下： 事件监听与事件委托 在js中，常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时，这种方式可能会带来性能影响。此时，我们可以用事件委托的方式来进行事件的监听。 每个事件都经历三个阶段 捕获到达目标冒泡事件委托需要用到事件的冒泡，冒泡就是事件发生时，上层会一层一层的接收这个事件。 如下页面结...
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...
本文实例讲述了JQuery事件委托原理与用法。分享给大家供大家参考，具体如下： 事件委托就是利用事件冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。事件委托首先可以极大的减少事件绑定次数，其次也可以让新加入的子集元素也拥有相同的操作。 一般绑定事件的写法以及事件冒泡 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <style type="text/css">.list{...
Ie9以下浏览器中的事件对象是放在全局中的window.event; 解决兼容性：event = event || window.event 事件委托（就是将事件绑定到父级/爷爷级对象上，通过事件对象的target属性来控制子级对象的改变）： event.target（点击的目标对象） <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>td{width: 100px;height: 100px;border:2px solid red;}</style> </head> <body> <table ><tr><td>...
本文实例分析了JavaScript事件委托原理与用法。分享给大家供大家参考，具体如下： 在日常中，我们可能会听到事件委托这样的概念，有些同学可能对事件委托已经很了解了，也有些同学可能只是听过事件委托，只是会简单的使用，但是对于事件委托的原理不怎么知道。所以该博文会解释一下原生js的事件委托的原理，为什么会有事件委托，为什么可以这样用事件委托等等问题。 1. js中的事件流 在解析事件委托之前，我们先回顾一下js中的事件...
本文实例讲述了JS中的事件委托。分享给大家供大家参考，具体如下： 事件委托（也叫事件代理），其实这个问题也简单，要想弄明白事件委托，我们先要把事件冒泡的机制搞清楚。举个事件冒泡的例子： <ul><li>点击</li> </ul> <script>var ul=document.getElementsByTagName(ul)[0];var li=document.getElementsByTagName(li)[0];ul.addEventListener(click, function(){alert(我是ul,我被点击了);}, false);li.addEventListener(click...