JavaScript事件拜托的技术道理

如今的JavaScript技术界里最炽热的一项技术应当是‘事件拜托(event delegation)’了。使用事件拜托技术能让你幸免对特定的每个节点增加事件监听器；相反，事件监听器是被增加到它们的父元素上。事件监听器会剖析从子元素冒泡上来的事件，寻到是哪个子元素的事件。根本概念非常简便，但仍有许多人不睬解事件拜托的工作道理。这里我将要说明事件拜托是怎样工作的，并供给几个纯JavaScript的根本事件拜托的例子。

假定我们有一个UL元素，它有几个子元素：

<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>

我们还假设，当每个子元素被点击时，将会有各自不一样的事件发生。你可以给每个独立的li元素增加事件监听器，但有时这些li元素大概会被删除，大概会有新增，监听它们的新增或删除事件将会是一场噩梦，特别是当你的监听事件的代码放在利用的另一个地方时。但是，假如你将监听器安放到它们的父元素上呢？你怎样能知道是阿谁子元素被点击了？

简便：当子元素的事件冒泡到父ul元素时，你可以检查事件对象的target属性，捕捉真正被点击的节点元素的援用。下面是一段很简便的JavaScript代码，演示了事件拜托的历程：

// 寻到父元素，增加监听器...
document.getElementById("parent-list").addEventListener("click",function(e) {
	// e.target是被点击的元素!
	// 假如被点击的是li元素
	if(e.target && e.target.nodeName == "LI") {
		// 寻到目标，输出ID!
		console.log("List item ",e.target.id.replace("post-")," was clicked!");
	}
});

第一步是给父元素增加事件监听器。当有事件触发监听器时，检查事件的来源，排除非li子元素事件。假如是一个li元素，我们就寻到了目标！假如不是一个li元素，事件将被忽略。这个例子非常简便，UL和li是标准的父子搭配。让我们试验一些差别比力大的元素搭配。假设我们有一个父元素p，里面有许多子元素，但我们关怀的是里面的一个带有”classA” CSS类的A标志：

// 获得父元素p, 增加监听器...
document.getElementById("myp").addEventListener("click",function(e) {
	// e.target是被点击的元素
	if(e.target && e.target.nodeName == "A") {
		// 获得CSS类名
		var classes = e.target.className.split(" ");
		// 搜索匹配!
		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....

				}
			}
		}

	}
});

上面这个例子中不仅比力了标签名，并且比力了CSS类名。虽然轻微复杂了一点，但还是很具代表性的。比方，假如某个A标志里有一个span标志，则这个span将会成为target元素。这个时候，我们需要上溯DOM树构造，寻到里面可否有一个 A.classA 的元素。

由于大部分程序员都会使用jQuery等工具库来处置DOM元素和事件，我倡议大家都使用里面的事件拜托办法，由于这里工具库里都供给了高级的拜托办法和元素鉴别办法。

但愿这篇文章能帮忙你懂得JavaScript事件拜托的幕后道理，但愿你也感受到了事件拜托的强大用途！

(英文：davidwalsh.)

引荐教程：《javascript根基教程》

以上就是JavaScript事件拜托的技术道理的具体内容，更多请关注百分百源码网其它相关文章！