How JavaScript Event Delegation Works
来源:互联网 发布:那些公司用three.js 编辑:程序博客网 时间:2024/06/05 22:54
转自: http://davidwalsh.name/event-delegate
One of the hot methodologies in the JavaScript world is event delegation, and for good reason. Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements. The base concept is fairly simple but many people don't understand just how event delegation works. Let me explain the how event delegation works and provide pure JavaScript example of basic event delegation.
Let's say that we have a parent UL element with several child elements:
<ul id="parent-list"> <li id="post-1">Item 1</li> <li id="post-2">Item 2</li> <li id="post-3">Item 3</li> <li id="post-4">Item 4</li> <li id="post-5">Item 5</li> <li id="post-6">Item 6</li></ul>
Let's also say that something needs to happen when each child element is clicked. You could add a separate event listener to each individual LI element, but what if LI elements are frequently added and removed from the list? Adding and removing event listeners would be a nightmare, especially if addition and removal code is in different places within your app. The better solution is to add an event listener to the parent UL element. But if you add the event listener to the parent, how will you know which element was clicked?
Simple: when the event bubbles up to the UL element, you check the event object's target property to gain a reference to the actual clicked node. Here's a very basic JavaScript snippet which illustrates event delegation:
// Get the element, add a click listener...document.getElementById("parent-list").addEventListener("click",function(e) { // e.target is the clicked element! // If it was a list item if(e.target && e.target.nodeName == "LI") { // List item found! Output the ID! console.log("List item ",e.target.id.replace("post-")," was clicked!"); }});
Start by adding a click event listener to the parent element. When the event listener is triggered, check the event element to ensure it's the type of element to react to. If it is an LI element, boom: we have what we need! If it's not an element that we want, the event can be ignored. This example is pretty simple -- UL and LI is a straight-forward comparison. Let's try something more difficult. Let's have a parent DIV with many children but all we care about is an A tag with the "classA" CSS class:
// Get the parent DIV, add click listener...document.getElementById("myDiv").addEventListener("click",function(e) { // e.target was the clicked element if(e.target && e.target.nodeName == "A") { // Get the CSS classes var classes = e.target.className.split(" "); // Search for the CSS class! if(classes) { // For every CSS class the element has... for(var x = 0; x < classes.length; x++) { // If it has the CSS class we want... if(classes[x] == "classA") { // Bingo! console.log("Anchor element clicked!"); // Now do something here.... } } } }});
The example above requires not only a tag match but also a CSS class match. While this is a bit more complex, it's still fairly simple in the grand scheme of things. For example, if the A element had a SPAN tag in it, the SPAN tag would be the target element. In that case, we'd need to walk up the DOM tree to find out if it contained an A.classA element we were looking for.
Since most developers use a JavaScript library for their DOM element and event handling, I recommend using the library's method of event delegation, as they capable of advanced delegation and element identification.
Hopefully this helps you visually the concept behind event delegation and convinces you of delegation's power!
- How JavaScript Event Delegation Works
- How JavaScript Event Delegation Works
- Event delegation in JavaScript
- how javascript loading works
- Event delegation
- DOM Event delegation
- Javascript – How Prototypal Inheritance really works
- (翻译)Javascript-How Prototypal Inheritance really works
- the advantages of event delegation
- Object-Oriented JavaScript Part 2: How the prototype works
- JS事件委托(event delegation)
- How Internet EDI Works
- How E-mail Works
- How E-mail Works
- How Google Works
- How DES works
- How Google Works
- How Google Map Works
- hibernate annotation 并发操作不冲突
- Linux--进程管理、查询与压缩
- Python基础教程
- SQL注入攻击与防御
- 自定义View,随机画点
- How JavaScript Event Delegation Works
- c++中使用const关键字的联系区别
- heap和stack的差别
- 从三国的人物身上我们能学到些啥?
- Project Euler problem 42
- 在VC中为应用程序添加图形超链接功能
- 卷积神经网络----无监督特征学习
- 编程的朋友们用的着的键盘键值汇总
- poj 1845 Sumdiv