js事件委托

Posted haodoubao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js事件委托相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul">
<li>我是标签一</li>
<li>我是标签二</li>
<li>我是标签三</li>
<li>我是标签四</li>
<li>我是标签五</li>
</ul>
</body>
</html>
<script type="text/javascript">

/**
* 如果需要给ul下面所有的li都添加一个点击事件的话;我们一般会这么写:
* 这么写需要先找到ul,然后遍历li,然后给所有的li标签添加点击事件
* */
var oli = document.getElementsByTagName("li");
// for (var i=0; i<oli.length;i++) {
// oli[i].onclick = function() {
// console.log(this.innerHTML);
// }
// }

/**
* 运用事件委托怎么处理呢?
* */
var oul = document.getElementById("ul");
oul.onclick = function(event){
var e = event || window.event;
var target = e.target || e.srcElement;
console.log(target.innerHTML);
}


</script>









































以上是关于js事件委托的主要内容,如果未能解决你的问题,请参考以下文章

对于原生js中的事件委托解析

[JS]笔记14之事件委托

js中的事件委托

js事件委托

JS中的事件委托详解(未完)

js事件事件委托