js事件委托原理简单介绍代码

所谓事件委托起始从名字上就很好理解，那就是自己的事件交给别人去做，也就是将事件委托给别人。

先说说它的优点，比如有很多li元素，我们想为每一个li元素注册一个点击事件，当然你可以挨个元素进行注册，但是如果100或者更多li元素的话，这绝对是海量工作，但是我们如果利用冒泡原理，将事件委托给li元素的父级元素处理，那么无论有多少个li元素，都能够轻松搞定了，事件冒泡可以参阅javascript事件冒泡简单介绍一章节。 

代码示例如下:

[ Foundation5 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css"> 
ul{
  list-style:none;
}
</style> 
<script type="text/javascript"> 
window.onload=function(){
  var obox=document.getElementById("box");
  var oshow=document.getElementById("show");
  obox.onclick=function(ev){
    var ev=ev||window.event;
    var target=ev.target||ev.srcElement; 
    oshow.innerHTML=target.innerHTML;
  }
}
</script>
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>51前端一</li>
  <li>51前端二</li>
  <li>51前端三</li>
  <li>51前端四</li>
</ul>
</body> 
</html>

代码描述：js事件委托原理。js事件委托原理简单介绍代码

下载全部收藏

139 185

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册