1.3.1 注册事件(2种方式)
给元素添加事件,称为注册事件或者绑定事件。
注册事件有两种方式:传统方式 和 方法监听 注册方式。
1.3.1.1 传统注册方式
利用 on 开头的事件 onclick
特点:
1、注册事件的唯一性
2、同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
<button onclick=“alert('hi~')”></button> btn.onclick = function() {}
1.3.1.2 方法监听注册方式
1、w3c 标准 推荐方式
2、addEventListener() 是一个方法
3、IE9 之前的 IE 不支持此方法,可使用 attachEvent() 代替
4、特点:
(1)同一个元素同一个事件可以注册多个监听器
(2)按注册顺序依次执行
1.3.2 事件监听
1.3.2.1 addEventListener()事件监听(IE9以后支持)
eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。
该方法接收3个参数:
type:事件类型字符串,比如 click 、mouseover ,注意这里不要带 on listener:事件处理函数,事件发生时,会调用该监听函数 useCapture:可选参数,是一个布尔值,默认是 false。学完 DOM 事件流后,再进一步学习。
1.3.2.2 attacheEvent()事件监听(IE678支持)
eventTarget.attachEvent(eventNameWithOn, callback)
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget(目标对象) 上,当该对象触发指定的事件时,指定的回调函数就会被执行。注意:IE8 及早期版本支持.
该方法接收两个参数:
eventNameWithOn:事件类型字符串,比如 onclick 、onmouseover ,这里要带 on callback: 事件处理函数,当目标触发事件时回调函数被调用
<button>传统注册事件</button> <button>方法监听注册事件</button> <button>ie9 attachEvent</button> <script> var btns = document.querySelectorAll('button'); // 1. 传统方式注册事件 btns[0].onclick = function() { alert('hi'); } btns[0].onclick = function() { alert('hao a u'); } // 2. 事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串 必定加引号 而且不带on // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序) btns[1].addEventListener('click', function() { alert(22); }) btns[1].addEventListener('click', function() { alert(33); }) // 3. attachEvent ie9以前的版本支持 btns[2].attachEvent('onclick', function() { alert(11); }) </script>
1.3.2.3 事件监听兼容性解决方案
兼容性处理的原则: 首先照顾大多数浏览器,再处理特殊浏览器
封装一个函数,函数中判断浏览器的类型:
function addEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 addEventListener 方法 if (element.addEventListener) { element.addEventListener(eventName, fn); // 第三个参数 默认是false } else if (element.attachEvent) { element.attachEvent('on' + eventName, fn); } else { // 相当于 element.onclick = fn; element['on' + eventName] = fn; } }
1.3.3 删除事件(解绑事件)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100px; height: 100px; background-color: pink; } </style> </head> <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; } // 2. removeEventListener 删除事件 // 里面的fn 不需要调用加小括号 【经测试,可以把整个fn函数写进来。】 divs[1].addEventListener('click', fn) function fn() { alert(22); divs[1].removeEventListener('click', fn); } // 另外一种写法 divs[1].addEventListener('click', function fn() { alert(22) this.removeEventListener('click', fn) }) // 3. detachEvent divs[2].attachEvent('onclick', fn1); function fn1() { alert(33); divs[2].detachEvent('onclick', fn1); } </script> </body> </html>
**删除事件兼容性解决方案 **
function removeEventListener(element, eventName, fn) { // 判断当前浏览器是否支持 removeEventListener 方法 if (element.removeEventListener) { element.removeEventListener(eventName, fn); // 第三个参数 默认是false } else if (element.detachEvent) { element.detachEvent('on' + eventName, fn); } else { element['on' + eventName] = null; } }