一.注册事件
1.事件概述:给元素添加事件,称为注册事件或者绑定事件。 注册事件有两种方式:传统方式和方法监听注册方式
传统注册方式:(1)利用on开头的事件 例如onclick。(2)targetment.οnclick= function() { } (3)注册的事件是唯一的。(4)同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数。
案例
<button>传统</button>
<script>
var btn = document.querySelector('button');
btns[0].onclick = function() { //传统注册方式
alert('你好');
}
btns[0].onclick = function() { //传统注册方式
alert('你好呀');//第二个处理函数将会覆盖上面一个,所以只会弹出 你好呀
}
</script>
方法监听注册方式:(1)标准方式 W3C推荐 (支持IE9以上版本) (2)addEventListener()它是一个方法。(3)特点:同一个元素同一个事件可以注册多个监听器。(按注册顺序依次执行)
案例
<button>方法监听</button>
<script>
var btn = document.querySelector('button');//事件是字符串型,也不用加on
btn.addEventListener('click',function(){
alert('你好');
})
</script>
二.删除事件
1.传统的删除(解绑)方式 eventTarget.onclick = null;
案例
<button>传统</button>
<script>
var btn = document.querySelector('button');
btns[0].onclick = function() { //传统注册方式
alert('你好');
btns[0].onclick = null;//删除(解绑)事件
}
</script>
2.方法监听删除(解绑)方式 eventTarget.removeEventListener(type,lister[, useCapture]);
<button>方法监听</button>
<script>
var btn = document.querySelector('button');//事件是字符串型,也不用加on
//btn.addEventListener('click',function(){
//alert('你好');
//btn.removeEventListener('click',function());//因为是匿名函数 这种方式无法删除 错误的
//})
//我们可以采用这种方法
btn.addEventListener('click',fn);//里面的fn不需要加小括号调用,因为是整个事件调用的
function fn() {
alert('你好');
btn.removeEventListener('click',fn);//删除(解绑)事件
}
</script>