JS学习总结-----DOM中的事件高级

一.注册事件

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>