JS事件委托
2017-09-19 本文已影响20人
哪树繁花
事件委托从字面意思上理解就是把事件委托给别人做。这样有什么好处呢？设想一下，一个ul里有很多li，现在要给每一个li都添加点击事件，就需要循环给li添加事件，这样性能会很差。这时候就可以使用事件委托解决。先了解下他的原理：利用事件冒泡，把子元素的事件添加到父元素上，触发事件执行。
需要注意的地方在下面的demo里都注释出来了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="list">
<li>点我</li>
<p>点我没用</p>
<li>点我</li>
<p>点我也没用</p>
<li>点我</li>
</ul>
<script>
var oUl = document.getElementById("list");
oUl.onclick = function(event){
event = event || window.event;
//获取事件源(需要考虑兼容,前者标准浏览器,后者IE)
var target = event.target || event.srcElement;
console.log(target.nodeName);
//这里注意获取到的nodeName的值全为大写
if (target.nodeName == "LI") {
alert("hello");
}
};
//使用事件委托写鼠标移入移出事件时不能使用onmouseenter和onmouseleave，
//因为他俩不支持事件冒泡
oUl.onmouseover = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
if (target.nodeName == "P") {
target.style.background = "green";
}
};
oUl.onmouseout = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
if (target.nodeName == "P") {
target.style.background = "";
}
};
</script>
</body>
</html>
