js事件委托的优点

美女程序员鼓励师

1、绑定在父元素上只需要绑定一次,节省性能。

2、子元素不需要每个人都绑定同一个事件。

3、如果后续添加新的子元素,由于事件委托,会自动接收父元素的事件监控

实例

js;toolbar:false">//原生js事件委托的例子,css部分可以忽略

<!doctype html>

<html>

<head>

<style>

ul{

list-style: none;

display: flex;

}

ul li{

width: 50px;

height: 50px;

line-height: 50px;

text-align: center;

background: pink;

font-weight: bold;

border: 1px solid #eee;

}

ul li:hover{

cursor: pointer;

}

</style>

</head>

<body>

<div>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

</div>

</body>

<script>

var ul = document.querySelector("ul");

var li = document.querySelectorAll("li");

ul.onclick = function(e){//e指event,事件对象

var target = e.target || e.srcElement; //target获取触发事件的目标(li)

if(target.nodeName.toLowerCase() == 'li'){//目标(li)节点名转小写字母,不转的话是大写字母

alert(target.innerHTML)

}

}

</script>

</body>

</html>

以上就是js事件委托的优点,希望对大家有所帮助。更多Javascript学习指路:Javascript

以上是 js事件委托的优点 的全部内容, 来源链接: utcz.com/z/546401.html

回到顶部