<!DOCTYPE HTML>
<html lang = 'en'>
<head>
<meta charset = 'UTF-8'/>
<title>Document1</title>
<style>
li{
margin:10px;
background-color:red;
}
</style>
</head>
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul')[0]
//这个函数的目的是让li标签打印自身得.innerHTML
ul.onclick = function(e){
var evt = e || event;
//_target : 触发事件的元素
var _target = evt.target || evt.srcElement;
//_target.nodeName : 触发事件的元素的名称
// _target.nodeName.toUpperCase() : 触发事件的元素的名称转化成大写字符串
if(_target.nodeName.toUpperCase() == 'LI'){
console.log(_target.innerHTML);
}
}
</script>
</body>
</html>
事件委托的例子
猜你喜欢
转载自blog.csdn.net/weixin_48727085/article/details/108237585
今日推荐
周排行