三种事件触发方法都存在时:
示例代码如下:
<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事件覆盖