javascript和jq的事件委托

2019独角兽企业重金招聘Python工程师标准>>>

今天在公司，有个需求是，通过ajax动态查询数据，回来，再添加到一个ul的li元素中，例如（点击生成 li 模拟，加载数据生成相应的数据，事件：点击）:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body><button>create</button><ul id="parent"><li class="son-1">Item 1</li><li class="son-2">Item 2</li></ul><script>$(function () {$('button').on('click', function (e) {$('#parent').append('<li>add</li>')});});</script>
</body>
</html>

平时自己的添加事件：

$('#parent li').on('click', function (e) {alert('这是第' + $(this).index() + 'li');
});

这样子可以为，dom元素中已经经过渲染的li元素绑定事件，如果点击 craete按钮新生成的li元素，由于，事件绑定的js已经执行完毕，所以无法对新生成的li进行事件的绑定。一开始，在没有用jq的事件委托，自己简单的粗暴的对新生的元素，再一次动态绑定：

//在生成新生元素后， 再次执行这段 函数 ，绑定需要的事件。
$('#parent li').on('click', function (e) {alert('这是第' + $(this).index() + 'li');
});

明显是很挫的做法，不仅不易维护，而且性能也大打折扣，因为这样虽然会为新的元素绑定到事件，但是已经存在的元素也会再次绑。

jq提供的事件委托，可以很有效的解决这种问题。delegate 和 on 都提供了相应的方法

$('#parent').delegate('li', 'click', function(event) {console.log($(this))
});

$('#parent').on('click', 'li', function (e) {console.log($(this))
});

这两个函数均可提供相应的效果，个人更倾向于使用 on :

下面是从jq的api copy过来的使用文档：

on(events,[selector],[data],fn)

概述

在选择元素上绑定一个或多个事件的事件处理函数。

on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己，请参阅.one()

参数

events,[selector],[data],fnV1.7

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

events-map,[selector],[data]V1.7

events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。

selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

javascript也有原生的事件委托

DEMO:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><input type="button" id="btn" /><ul id="ul"><li>aaaaaaaa</li><li>bbbbbbbb</li><li>cccccccc</li></ul><script>window.onload = function(){var oUl = document.getElementById("ul");var aLi = oUl.getElementsByTagName("li");var oBtn = document.getElementById("btn");var iNow = 4;oUl.onmouseover = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;if(target.nodeName.toLowerCase() == "li"){alert('触发了')}}oUl.onmouseout = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;if(target.nodeName.toLowerCase() == "li"){alert('触发了')}}oBtn.onclick = function(){iNow ++;var oLi = document.createElement("li");oLi.innerHTML = iNow;oUl.appendChild(oLi);}}</script>
</body>
</html>

从原生的js中可以看出：事件委托是通过，事件的冒泡。实现的。通过子元素的点击事件，冒泡到父元素，父元素再通过event的内容判断为该元素触发相应的事件，在demo中的，获取对应的 tagName 判断子元素是不是 li。是的话触发对应的事件，从而达到事件的委托。

转载于:https://my.oschina.net/xbuding/blog/667168