onclik和addEventListener区别
Posted 胡开心同学
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了onclik和addEventListener区别相关的知识，希望对你有一定的参考价值。
一 传统注册方式（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>以上是关于onclik和addEventListener区别的主要内容，如果未能解决你的问题，请参考以下文章
onEvent.Listen() 和 addEventListener 的区别