JS DOM 删除事件

2 删除事件（解绑事件）

2.1 删除事件的方式

1.传统注册方式
eventTarget. onclick = null;
2.方法监听注册方式
①eventTarget. removeEventListener (type, listener [ useCapture]) ;
②eventTarget. de tachEvent (eventNameWithon, cal1back) ;

<script>
 var divs = document.querySelectorAll('div');
    divs[0].onclick = function () {
     
        alert(11);
//1.传统方式删除事件
        divs[0].onclick = nul1;
// 2. removeEventL istener 删除事件
        divs[1].addEventlistener('click', fn) //里面的fn不需要调用加小括号
        // 2. removeEventL istener 删除事件
        // divs [1]. addEventListener('click', fn) //里面的fn不需要调用加小括号
        function fn() {
     
            alert(22);
            divs [1].removeEventListener('click', fn);
        }
        // 3.
        divs [2].attachEvent('onclick', fn1);
        function fn1() {
     
            alert(33);
            divs [2].detachEvent(' onclick', fn1);
</script>

2.2 删除事件兼容性解决方案

function removeEventListener (element, eventName, fn) {
     
//判断当前浏览器是否支持removeEventListener方法
        if (element. removeEventListener) {
     
            element . removeEventLi stener (eventName, fn); // 第三个参数默认是false
        } else if (element . detachEvent) {
     
            element. de ta chEvent('on' + eventName, fn) ;
        } else {
     
            element['on' + eventName] = null;
        }