Salted fish front end-js event

event

Event: trigger-response mechanism

The Event interface represents any event that occurs in the DOM, some are generated by the user (such as mouse or keyboard events), while others are generated by the API.

Three elements of events

• Event source: the element that triggered the event
• Event type: How the event is triggered (for example, mouse click or keyboard click)
• Event handler: code to be executed after the event is triggered (function form)

Basic use of events

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

Binding event listener function

The method is to use addEventListener () or attachEvent () to bind the event listener function.

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

parameter	Explanation
eventName	Event name. Note that there is no "on" in the event name, such as mouse click event click, mouse double click event doubleclick, mouse move in event mouseover, mouse out event mouseout, etc.
handle	Event handler function, that is, the function used to process events.
useCapture	Boolean type, whether to use capture, generally use false (bubbling).

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

parameter	Explanation
eventName	Event name. Note that unlike addEventListener (), the event name here is "on", such as mouse click event onclick, mouse double click event ondoubleclick, mouse move in event onmouseover, mouse move out event onmouseout, etc.
handle	Event handler function, that is, the function used to process events.

The difference between addEventListener () and attachEvent ()

• 1. The method name is different
• 2. The number of parameters is different:
  three parameters of addEventListener, two parameters of attachEvent
• 3. Compatibility is different:
  addEventListener Google, Firefox, IE11 support, IE8 does not support
  attachEvent Google Firefox does not support, IE11 does not support, IE8 support
• 4.this is different:
  this in addEventListener is the current in the
  attachEvent object this is window
• 5. The difference between "on":
  The type of event (name of event) in addEventListener is not on
  .

Element binding / unbinding event

Unbind in the corresponding way when binding

1. Object. On Event Name

//绑定：对象.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);

Compatible code

//为任意一个元素绑定事件:元素,事件类型,事件处理函数
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;
    }
}