JS事件addEventListener、on、元素属性事件触发的先后顺序

三种事件触发方法都存在时：

示例代码如下：

<div id="div1" onclick="ma()">
    点击
</div>
<script>
	var oDiv1=document.getElementById("div1");
	oDiv1.addEventListener("click",function(){
		console.log("addEventListener事件触发");
	});
	oDiv1.onclick=function(){
		console.log("on事件触发");
	}
	function ma(){
		console.log("元素绑定方法触发");
	}
	
</script>

浏览器执行结果，截图如下：

 

只存在addEventListener、元素属性事件时

示例代码如下：

	<div id="div1" onclick="ma()">
         点击
	</div>
	<script>
	    var oDiv1=document.getElementById("div1");
	    oDiv1.addEventListener("click",function(){
		console.log("addEventListener事件触发");
	    });
	    function ma(){
		    console.log("元素绑定方法触发");
	    }
	</script>

浏览器执行结果，截图如下：

只存在addEventListener、on事件时

示例代码如下：

	<div id="div1">
	</div>
	<script>
	    var oDiv1=document.getElementById("div1");
	    oDiv1.addEventListener("click",function(){
		    console.log("addEventListener事件触发");
	    });
	    oDiv1.onclick=function(){
		    console.log("on事件触发");
	    }
	</script>

浏览器执行结果，截图如下：

附：当on事件在上，addEventListener事件在下时，执行结果，截图如下：

总结：

1、在JS中存在某元素某事件，使用多个on事件和addEventListener事件进行定义。addEventListener事件会全部执行；而后面的on事件会覆盖前面的on事件，最终只执行最后一个on事件。

2、on事件和元素属性事件在本质上是一样的。因为元素属性事件是写在元素中的，所以它会首先触发，然后再触发JS中的事件（addEventListener事件、on事件）。当它们同时存在时，on事件会覆盖元素属性事件（本质相同、后面的on事件会覆盖前面的on事件）

3、当addEventListener、on、元素属性事件同时存在时，元素属性事件会首先触发，然后再执行JS中的事件。但是JS中若存在该事件的on事件，会被该on事件覆盖

转自https://blog.csdn.net/MOONCOM/article/details/80109112