一、元素事件的绑定
- 第一种方式
/** * @param {*} element 元素 * @param {*} type 事件类型 * @param {*} fn 事件处理函数 */ element["on"+type]=fn; 例如: element.onclick = function(){ console.log("我是element元素的点击事件"); }
- 第二种方式
/** * 为任意元素绑定任意事件 * @param {*} element 元素 * @param {*} type 事件类型 * @param {*} fn 事件处理函数 */ element.addEventListener(type,fn,false); 例如: element.addEventListener('click',function(){ console.log("我是element元素的点击事件"); },false);
-
/** * 为任意元素绑定任意事件 * @param {*} element 元素 * @param {*} type 事件类型 * @param {*} fn 事件处理函数 */ element.attachEvent(type,fn); 例如: element.attachEvent('onclick',function(){ console.log("我是element元素的点击事件"); });
二、元素事件的解绑
- 第一种事件绑定方式的解绑
/** * 为元素解绑事件 * @param {*} element 标签元素 * @param {*} type 事件类型 */ element["on"+type] = null; 例如: element.onclick = null;
- 第二种事件绑定方式的解绑
/** * 为元素绑定事件 * @param {*} element 元素 * @param {*} type 事件类型 * @param {*} fn 事件处理函数 */ element.removeEventListener(type,fn,false); 例如: element.removeEventListener("click",function(){ console.log("我是第二种事件绑定方式的解绑"); },false);
- 第三中事件绑定方式的解绑
/** * 为元素解绑事件 * @param {*} element 元素 * @param {*} type 事件类型 * @param {*} fn 事件处理函数 */ element.detachEvent(type,fn); 例如: element.detachEvent("onclick",function(){ console.log("我是第三种事件绑定方式的解绑事件"); });
注意:
- 用什么方式绑定事件,就用什么方式解绑事件;
- element.removeEventListener(type,fn,false) ====> element.addEventListener(type,fn,false)
fn必须是命名函数,不能是匿名函数IE8不支持type是没有on的事件类型第三个参数是用来控制事件阶段的,false代表是冒泡阶段,true代表是捕获阶段
-
element.detachEvent(type,fn) ====> element.attachEvent(type,fn)fn必须是命名函数,不能是匿名函数谷歌火狐不支持,IE8支持type是有on的事件类型
三、绑定事件的区别
addEventListener() 与 attachEvent()
相同点:
都可以为元素绑定事件
不同点:
1.方法名不一样
2.参数不一样,addEventListener接收三个参数,attachEvent接收两个参数
3.addEventListener 谷歌,火狐,IE11支持,IE8不支持
attachEvent 谷歌,火狐,IE11不支持,IE8支持
4.this不同,addEventListener 中this是当前绑定事件的对象,attachEvent 中的this是window
5.addEventListener 中事件的类型(事件的名字)没有on
attachEvent 中时间的类型(事件的名字)有on