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

最新推荐文章于 2023-06-27 17:18:45 发布

考拉的墨尔本

最新推荐文章于 2023-06-27 17:18:45 发布

阅读量2.1k

点赞数 2

文章标签： javascript 事件委托

本文链接：https://blog.csdn.net/yaojxing/article/details/72848090

版权

在日常中，我们可能会听到事件委托这样的概念，有些同学可能对事件委托已经很了解了，也有些同学可能只是听过事件委托，只是会简单的使用，但是对于事件委托的原理不怎么知道。所以该博文会解释一下原生js的事件委托的原理，为什么会有事件委托，为什么可以这样用事件委托等等问题。

1.js中的事件流

在解析事件委托之前，我们先回顾一下js中的事件流，即冒泡和捕获。

1.冒泡：当下级节点触发某个事件的时候，该事件会逐级向上触发上级节点的同类事件。

2.捕获：和冒泡类似，只不过事件的顺序相反。即是从上级节点传递到下级节点

2.事件委托原理

事件委托就是基于js的事件流产生的，事件委托是利用事件冒泡，将事件加在父元素或者祖先元素上，触发该事件。

    <body>
    	<div id="myDiv">
    		<input type="button" value="按钮1" id="btn1">
    		<input type="button" value="按钮2" id="btn2">
    		<input type="button" value="按钮3" id="btn3">
    	</div>
    </body>
    <script type="text/javascript">
    	document.getElementById("myDiv").οnclick=function(e){
    		e=window.event||e;
    		var btnId=e.target.id;
    		switch(btnId){
    			case "btn1":
    				console.log("按钮1");
    			break;
    			case "btn2":
    				console.log("按钮2");
    			break;
    			case "btn3":
    				console.log("按钮3");
    			break;
    		}
    	}
    </script>

上面的代码就是一个典型的事件委托案例。利用的原理就是事件冒泡，将事件加载父元素上，通过event参数来区别按钮的不同