1.注册事件（绑定事件）

1.1注册事件概述

  • 给元素添加事件，称为注册事件或者绑定事件。
  • 注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式

利用on开头的事件onclick

btn.onclick = function() {}
特点:注册事件的唯一性
同一个元素同一个事件只能设置-个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

w3c标准推荐方式
addEventListener()它是一一个方法
IE9之前的IE不支持此方法,可使用attachEvent0代替
特点:同一个元素同一个事件可以注册多个监听器
按注册顺序依次执行

1.2 addEventListener事件监听方式

JS的DOM注册事件和删除事件_前端

注意：

(1) 里面的事件类型是字符串必定加引号而且不带on
(2)同一个元素同一个事件可以添加多个侦听器(事件处理程序)

1.4注册事件兼容性解决方案

JS的DOM注册事件和删除事件_解决方案_02

兼容性处理的原则：首先照顾大多数浏览器，在处理特殊浏览器

2.删除事件（解绑）

2.1删除事件的方式

1.传统注册方式

eventTarget.onclick  = null;

2.方法监听注册方式

①eventTarget . remove EventListener (type，listener [，useCapture]) ;
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function(){
            alert(11);
            //1.传统方式删除事件
            divs[0].onclick = null;
        }
        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].removeEventListener('onclick',fn1);
        }
        
    </script>

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

JS的DOM注册事件和删除事件_开发语言_03