咸鱼前端—js 事件

事件

事件：触发-响应机制

Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。

事件三要素

• 事件源:触发(被)事件的元素
• 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
• 事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用

var box = document.getElementById('box');
box.onclick = function() {
  console.log('代码会在box被点击后执行');  
};

绑定事件监听函数

方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);

参数	说明
eventName	事件名称。 注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle	事件句柄函数，即用来处理事件的函数。
useCapture	Boolean类型，是否使用捕获，一般用false （冒泡）。

attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);

参数	说明
eventName	事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
handle	事件句柄函数，即用来处理事件的函数。

addEventListener() 和 attachEvent() 区别

• 1.方法名不一样
• 2.参数个数不一样：
  addEventListener三个参数,attachEvent两个参数
• 3.兼容性不一样：
  addEventListener 谷歌,火狐,IE11支持,IE8不支持
  attachEvent 谷歌火狐不支持,IE11不支持,IE8支持
• 4.this不同：
  addEventListener 中的this是当前绑定事件的对象
  attachEvent中的this是window
• 5.”on”区别：
  addEventListener中事件的类型(事件的名字)没有on
  attachEvent中的事件的类型(事件的名字)有on

元素绑定/解绑事件

用什么方式绑定就用对应方式解绑

1.对象.on事件名称

//绑定：对象.on事件名字=事件处理函数
document.getElementById("id").onclick = function(){
	console.log(绑定事件成功)
};

//解绑：对象.on事件名字=null;
document.getElementById("id").onclick = function(){
	document.getElementById("id").onclick=null;
}; 
  

2.addEventListener

//绑定：对象.addEventListener("没有on的事件类型",命名函数,false);
document.getElementById("id").addEventListener("click",f1,false);
//解绑：对象.removeEventListener("没有on的事件类型",函数名字,false);
document.getElementById("id").removeEventListener("click",f1,false);

3.attachEvent

//绑定：对象.attachEvent("on事件类型",命名函数);
document.getElementById("id").attachEvent("onclick",f1);
//解绑：对象.detachEvent("on事件类型",函数名字);
document.getElementById("id")..detachEvent("onclick",f1);

兼容代码

//为任意一个元素绑定事件:元素,事件类型,事件处理函数
function addEventListener(element,type,fn) {
    if(element.addEventListener){
        //支持
        element.addEventListener(type,fn,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,fn);
    }else{
        element["on"+type]=fn;
    }
}
//为任意的一个元素解绑某个事件:元素,事件类型,事件处理函数
function removeEventListener(element,type,fn) {
    if(element.removeEventListener){
        element.removeEventListener(type,fn,false);
    }else if(element.detachEvent){
        element.detachEvent("on"+type,fn);
    }else{
        element["on"+type]=null;
    }
}