事件委托

以下是为您整理出来关于【事件委托】合集内容,如果觉得还不错,请帮忙转发推荐。

【事件委托】技术教程文章

jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法_jquery

首先,大家都知道,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性能优化之事件委托实例详解

本文实例分析了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事件委托的技术原理探讨示例_javascript技巧

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)'了。使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。基本概念非常简单,但仍有很多人不理解事件委托的工作原理。这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子。 假定我们有一个UL元素...

事件委托与阻止冒泡阻止其父元素事件触发_jquery

简单说下事件委托与阻止冒泡 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...

JavaScript事件委托用法分析_javascript技巧

本文实例讲述了JavaScript事件委托用法。分享给大家供大家参考。具体分析如下: 一、点击页面任何部分触发事件 创建一个script1.js文件。代码如下:(function() {eventUtility.addEvent(document, "click", function(evt) {alert(hello);}); }()); 页面部分。代码如下:输出结果:点击页面任何一处都会弹出框。 但,我们有时候希望点击document内的某个元素来触发事件。 二、使用委托触发事件 在页面上增加a标签。代码如下:点我把scr...

JavaScript事件委托技术实例分析_javascript技巧

本文实例分析了JavaScript事件委托技术。分享给大家供大家参考。具体分析如下: 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差. 其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的. 事件委托: 对事件处理程序过多的问题解决的方案就是事件委托技术. 事件...

javascript事件委托的用法及其好处简析_javascript技巧

本文为大家简单介绍了javascript事件委托的用法及其好处,供大家参考,具体内容如下 事件委托:利用冒泡的原理,把事件加到父级上,触发执行效果, 好处:提高性能,新添加的元素还会有之前的事件。 event对象:事件源,不管在哪个事件中,只要你操作的那个元素就是事件源 获取事件源: IE:window.event.srcElement 标准下:event.target target.nodeName来判断是哪个标签 代码应用如下:window.onload=function () {var oUl=doc...

jQuery代码优化事件委托篇_jquery【图】

jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合。 事件委托 事件委托的事例在现实当中比比皆是。比如,有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件...

javascript事件委托和jQuery事件绑定on、off和one

一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生。而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可。如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理。如果用之前的.bind()处理,那么就需要绑定2000 个事件,就...

javascript中的事件委托详解【图】

这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是撤出了我们的事件冒泡和捕获机制,以及事件委托机制,对于上边这些,我们慢慢来看.  首先说一下事件冒泡和事件捕获机制,事件冒泡是有微软公司提出来的,事件捕获是有网景公司提出来的,当时两家是争论的不可开交,后来w3c也没办法,就采取了折中的...