复习笔记之API(5) 事件高级&&监听事件引入

事件高级

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

• 传统注册方式
  • 以on开头的事件，例如：onclick、onmouseover等
  • <button onclick = "alert('hi~')">点击</button>
  • btn.onclick = function() {}
  • 注册事件的唯一性：同一个元素、同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

<button>传统注册事件</button>
<script>
    let btn = document.querySelector('button');
    btn.onclick = function() {
        alert('嘿嘿');
    }
    btn.onclick = function() {
        alert('呵呵');
    }
</script>

• 方法监听注册方式
  • W3C标准(推荐方式)
  • addEventListener()它是一个方法
  • IE9以前不支持，可以使用attachEvent()代替
  • 同一个元素、同一个事件可以注册多个监听器(监听处理函数)，会按照顺序依次执行

addEventListener事件监听方式

语法规范：eventTarget.addEventListener(type, listener, [useCapture])

• eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。
• 该方法接收三个参数
  • type：事件类型字符串，比如：click、mouseover,注意这里不用加on
  • listener：事件处理函数，事件发生时，会调用该方法监听函数
  • useCapture：可选参数，是一个布尔值，默认是false

<button>事件监听注册事件</button>
<script>
    let btn = document.querySelector('button');
    // addEventListener里面的事件类型是字符串，要加引号，而且不带on
    // 同一个元素、同一个事件可以添加多个侦听器(事件处理程序)
    btn.addEventListener('click', function() {
        alert(123);
    })
    btn.addEventListener('click', function() {
        alert(57);
    })
</script>

attachEvent()事件监听方式(IE9以前支持)

语法规范：eventTarget.attachEvent(eventNameWithOn, callback)

• eventTarget.attachEvent()方法将指定的监听器注册到eventTarget(目标对象)上，但该对象触发指定事件时，指定的回调函数就会被执行
• 该方法接收两个参数：
  • eventNameWithOn：事件类型字符串，比如：onclick、onmouseover,这里要带on
  • callback：事件处理函数，当目标触发事件时回调函数被调用

删除事件(解绑事件)

• eventTarget.onclick = null;
• eventTarget.removeEventListener(type, listener, [useCapture])
• eventTarget.detachEvent(eventNameWithOn, callback)(IE9以前支持)

<!-- div样式为宽高100px,背景颜色能看见就行 -->
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    let divs = document.querySelectorAll('div');
    divs[0].onclick = function() {
        alert('11');
        // 传统方式删除事件
        div[0].onclick = null;
    }

    // removeEventListener删除事件
    divs[1].addEventListener('click', fn);//里面的fn 不需要调用加小括号
    function fn() {
        alert(22);
        div[1].removeEventListener('click', fn);
    }

    // detachEvent删除事件
    divs[2].attachEvent('onclick', fn1);
    function fn1() {
        alert(33);
        div[2].detachEvent('onclick', fn1);
    }
</script>

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

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