【前端笔记】JavaScript中addEventListerner和onclick的区别

马农一号

已于 2023-08-21 02:34:09 修改

阅读量236

点赞数

文章标签：前端笔记 javascript

于 2023-08-20 22:59:29 首次发布

本文链接：https://blog.csdn.net/itman233/article/details/132397587

版权

文章讲述了JavaScript中addEventListener和onEventType在添加事件处理函数时的不同行为，以及addEventListener对事件捕获/冒泡模式的控制。同时提到了jQuery的.click和.on方法效果一致。

摘要由CSDN通过智能技术生成

【区别1】addEventListener在同一元素上的同一事件类型添加多个事件，不会被覆盖，而onEventType会覆盖。

let btn = document.querySelector('.btn');
btn.onclick = function(){
    console.log("hello javascript");
};
	btn.onclick = function(){
    console.log("hello, world");
};

//结果输出: hello, world

onclick后面用的是赋值号，所以后执行的函数会覆盖前面的函数，结果只输出”hello world“。

addEventListener则实现类似“追加”功能。

btn.addEventListener("click", function(){
    console.log("hello javascript");
});

btn.addEventListener("click", function(){
    console.log("hello, world");
});

结果为

hello javascript
hello, world

好奇试了一下，jQuery用.click和.on方法使用的效果都是一样的，两段文字都会输出

let btn = $('.btn');
btn.click(function(){
    console.log("hello javascript");
})
btn.click(function(){
    console.log("hello, world");
})

// 输出：hello javascript
//       hello, world

btn.on("click", function(){
    console.log("hello javascript");
});

btn.on("click", function(){
    console.log("hello, world");
});

// 输出：hello javascript
//       hello, world

【区别2】addEventListener可以设置元素在捕获阶段触发事件，而onEventType不能

创建三个div层层嵌套

<div class="big" style="height: 300px; width: 300px;background-color: yellow;">
	<div class="mid" style="height: 200px; width: 200px; background-color: red;">
		<div class="small" style="height: 100px; width: 100px; background-color: blue;">
		</div>
	</div>
</div>

设置三个div点击时输出文本

<script type="text/javascript">
	let big = document.querySelector('.big');
	let mid = document.querySelector('.mid');
	let small = document.querySelector('.small');
	big.addEventListener("click", function(){console.log("big")});
	mid.addEventListener("click", function(){console.log("mid")});
	small.addEventListener("click", function(){console.log("small")});
</script>

默认情况下，点击最底层div（蓝色），三个div的执行顺序是从底层向高层依次执行（事件冒泡）。

控制台输出结果：

而addEventListener可以有第三个参数，默认情况下为false，会使得事件以“事件冒泡”顺序执行。

若改为true，则可使之以相反顺序执行（事件捕获）。

big.addEventListener("click", function(){console.log("big")}, true);
mid.addEventListener("click", function(){console.log("mid")}, true);
small.addEventListener("click", function(){console.log("small")}, true);

点击最底层（蓝色），控制台输出：