JS和JQuery中的事件托付 学习笔记
2017-06-27 20:02
435 查看
事件托付事实上并非一个非常高级的技巧,比方在一个页面里面。当仅仅存在两个button的时候。可能你给button加入监听是这种:(本文不考虑浏览器兼容性。关于事件的兼容性可參考前面的学习笔记)
当button越来越多的时候。甚至到了几十上百的时候。我相信非常少有人会选择一个一个的加入事件,首先。事实上事件处理函数每一个都是对象,都会占用内存,创建的越多。内存开销越大,性能越差;其次。大量“反复”性的代码拥挤在脚本里,非常难以维护,也非常难看。还有。加入大量监听意味着要频繁訪问DOM元素,延迟整个页面的訪问时间。
事件托付就是解决问题的一个方案。
我们知道。在DOM节点构成的DOM树中,子节点产生一个事件之后会逐级冒泡到父元素上:
事件托付就利用这一特性。仅仅需给全部的button的父元素比方container加入一个事件,这样无论是哪个button,仅仅要触发了绑定的事件都会冒泡到container上,我们仅仅需推断是不是你想监听的button就可以。
这种方法另一个明显的优点是你不必再问以后创建的元素加入监听。
比方在上面的推断里加入
加入这个事件处理程序的时候页面中还并没有btn3,但btn3非常可能是由用户动态创建的,但无论用户什么时候创建,你都能在这个条件里捕获它。
事实上这种方法相同也是通过遍历全部a标签,给他们加入事件函数。但比原生js代码量要少非常多。
当有事件冒泡到document上时。将检查事件是否为click事件,元素是否带有link的className。满足这两个条件则将触发事件处理函数。
除了默认绑定在document上。也能够绑定在指定父元素上:
相同是绑定事件到.link筛选条件上,使用delegate方法例如以下:
能够看到,我们在须要绑定的父元素(id名为container的元素)上调用的delegate方法,并传递三个參数:监听元素筛选条件、监听事件名、事件处理函数。
通过链式调用更加舒服:
live和delegate是能够为动态生成的元素触发事件处理函数的,由于绑定在父元素上的仅仅是一个筛选条件。
最后须要注意的是相同是绑定在document元素上的click事件:
最好使用delegate方法,由于尽管live相同是绑定在document上。但$(“.btn”)这句代码还是会遍历全部的.btn元素并给其创建JQuery对象,相比于直接使用document,性能上会有所不如。
当然。就拿写法来说,我们也更应该喜欢delegate方法。
<div id="container"> <button id="btn1">button1</button> <button id="btn2">button2</button> </div>
var btn1 = document.getElementById("btn1"); var btn2 = document.getElementById("btn2"); btn1.addEventListener("click", clickHandler1); btn2.addEventListener("click", clickHandler2);
当button越来越多的时候。甚至到了几十上百的时候。我相信非常少有人会选择一个一个的加入事件,首先。事实上事件处理函数每一个都是对象,都会占用内存,创建的越多。内存开销越大,性能越差;其次。大量“反复”性的代码拥挤在脚本里,非常难以维护,也非常难看。还有。加入大量监听意味着要频繁訪问DOM元素,延迟整个页面的訪问时间。
事件托付就是解决问题的一个方案。
我们知道。在DOM节点构成的DOM树中,子节点产生一个事件之后会逐级冒泡到父元素上:
事件托付就利用这一特性。仅仅需给全部的button的父元素比方container加入一个事件,这样无论是哪个button,仅仅要触发了绑定的事件都会冒泡到container上,我们仅仅需推断是不是你想监听的button就可以。
var container = document.getElementById("container"); container.addEventListener("click", function(e){ //获取事件触发对象 var target = e.target; if(target.id == "btn1"){ alert("btn1"); }else if(target.id == "btn2"){ alert("btn2"); } });
这种方法另一个明显的优点是你不必再问以后创建的元素加入监听。
比方在上面的推断里加入
else if(target.id == "btn3"){ alert("btn3"); }
加入这个事件处理程序的时候页面中还并没有btn3,但btn3非常可能是由用户动态创建的,但无论用户什么时候创建,你都能在这个条件里捕获它。
JQuery里面的事件托付
事实上在JQuery里。由于非常easy创建一个JQuery集合。所以处理事件相对简单。一、click函数、bind函数等:
$("a").click(function(){ if($(this).hasClass("a1")){ //... }else if(...){ //... } }); $("a").bind("click", function(){ if($(this).hasClass("a1")){ //... }else if(...){ //... } });
事实上这种方法相同也是通过遍历全部a标签,给他们加入事件函数。但比原生js代码量要少非常多。
二、live()
live和上面讲的原生js相似。不指定父元素的时候,将事件绑定在了document上,比方:$(".link").live("click", function(){ //... });
当有事件冒泡到document上时。将检查事件是否为click事件,元素是否带有link的className。满足这两个条件则将触发事件处理函数。
除了默认绑定在document上。也能够绑定在指定父元素上:
$(".link", $("#container")).live("click", function(){ //... });
三、delegate
事实上无论是live还是bind,他们的写法都非常奇怪,我们讨论的事件托付都是给父元素加入的事件监听,但一直到如今都好像是在子元素上调用的方法。只是还好JQuery里面另一个函数:delegate。相同是绑定事件到.link筛选条件上,使用delegate方法例如以下:
$("#container").delegate(".link", "click", function(){ //... });
能够看到,我们在须要绑定的父元素(id名为container的元素)上调用的delegate方法,并传递三个參数:监听元素筛选条件、监听事件名、事件处理函数。
通过链式调用更加舒服:
$("#container").delegate(".link", "click", function(){ //... }).delegate(".btn", "click", function(){ //... }).delegate(".whatever", "click", function(){ //... });
注意
bind是不能为后面动态生成的元素绑定事件的(由于调用bind时遍历的是当时页面里的全部元素)。live和delegate是能够为动态生成的元素触发事件处理函数的,由于绑定在父元素上的仅仅是一个筛选条件。
最后须要注意的是相同是绑定在document元素上的click事件:
$(".btn").live("click", function(){ //... }); $("document").delegate(".btn", "click", function(){ //... });
最好使用delegate方法,由于尽管live相同是绑定在document上。但$(“.btn”)这句代码还是会遍历全部的.btn元素并给其创建JQuery对象,相比于直接使用document,性能上会有所不如。
当然。就拿写法来说,我们也更应该喜欢delegate方法。
相关文章推荐
- js学习笔记(二):JQuery中的On绑定事件的方法
- JS和JQuery中的事件委托 学习笔记
- JavaScript 学习笔记(十六) js事件
- jQuery学习笔记之jQuery的事件
- js学习笔记——事件
- js中的event事件对象兼容型写法及事件流学习笔记
- jquery学习笔记 之二 事件与效果
- [jQuery]学习笔记(二):选择器和事件的处理
- js学习笔记(十四)事件处理模型
- JS / jQuery 学习笔记(附百度统计初探??)
- 学习笔记——jQuery 事件
- jquery.Validation.js 学习笔记 [待更新](API 和 DEMO等)
- Jquery学习笔记——事件
- Js、jquery学习笔记
- JQuery学习笔记1:无效的p click 事件
- jQuery学习笔记之jQuery的事件
- learning jQuery 学习笔记五(+jQuery 1.4.1 API)--复合事件
- learning jQuery 学习笔记六(+jQuery 1.4.1 API)-- 事件捕获+事件冒泡+模仿事件
- jQuery 学习笔记(二)——jQuery 选择器、jQuery事件
- jquery.maskload.js学习笔记