onclik和addEventListener区别

最新推荐文章于 2024-05-06 09:44:33 发布

程序员微木

最新推荐文章于 2024-05-06 09:44:33 发布

阅读量168

点赞数

分类专栏： JavaScript 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_67896626/article/details/128093496

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一传统注册方式（onclick）：

1 注册事件具有唯一性，即指同一个元素同一个事件只能绑定一个函数，如果绑定了多个函数，点击后只执行第一个函数。

2 兼容性问题：onclick点击事件不具有兼容性的问题，其浏览器的任何版本都加以支持

3 形式：事件源.事件. = function(){}

二方法监听注册事件：

1 与传统注册方式最大的特点，同一个元素同一个事件可以注册多个监听器，其执行顺序按照注册顺序依次进行

2 兼容性问题：IE9之前的IE不支持此方法

三两者删除方式

1传统注册方式删除：

eventTarget.onclick = null;

2 方法监听注册事件删除：

（1）eventTarget.removeEventListener(type,函数名)

（2）注意小括号内填写的是函数名，因此在绑定方法监听事件时，不能以匿名函数的形式进行绑定。具体代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="text" name="input1" id="input1" value="" />
		<input type="text" name="input2" id="input2"value="" />
		<span class="newSpan">
			
		</span>
		<button id="chuantong">传统注册方式</button>
		<button id="listener">方法监听注册方式</button>
		<script type="text/javascript">
				let input1 = document.querySelector('#input1');
				let input2 = document.querySelector('#input2');
				let newSpan = document.querySelector('.newSpan');
				let chuantong = document.querySelector('#chuantong');
				let listener = document.querySelector('#listener');
   //传统绑定事件
				chuantong.onclick = function(){
					let sum = (+input1.value) + (+input2.value);
					newSpan.innerHTML = sum;
					chuantong.onclick = null;
				}
   //方法监听事件
				listener.addEventListener('click',clickDelete);
				function clickDelete(){
					let sum = (+input1.value) + (+input2.value);
					newSpan.innerHTML = sum;
					listener.removeEventListener('click',clickDelete);
				}
		</script>
	</body>
</html>