Event streams

Describes the order in which events are received from the page; IE event bubbles, and other events capture the flow.

Event Handler

Function-event handler (event listener) that responds to an event

• html event handler

<form action="">
    <input type="text" name="username" value=""/>
    <input type="button" onclick="alert(username.value)" />
</form>
<input type="button" onclick="try{show();}catch(ex){}" />

• The bubble phase of the DOM0 level event handler (the element's method, this points to that element) event flow is handled.
  
  • The method of the element, this points to the element, and the bubble phase of the event stream is processed.

ali.onclick = function(){
    alert(this.id)
};
ali.onclick = null; //Delete event handler

• DOM2 level event handler

  • DOM2 level event handler (addEventListener(), removeEventListener()) belongs to three parameters within the scope of the element: processing event name, as a function of event handling, Boolean (true - > capture, flase - > bubbles).

  • Multiple event handlers can be added.

  • You can only use removeEventListener(), and the parameters you pass in when you remove them need to be the same as when you add them.

  • Event handlers are usually added to the bubbling phase, compatible with more browsers.

• IE event handler.

  • attachEvent(), detachEvent() accepts the same two parameters, event handler name and event handler function. Bubble stage, running in the global role.

  • Multiple event handlers can be added, triggered in reverse order.

oUl.attachEvent("onclick",function(){
    alert(this == window);
});

• Cross-browser event handlers

var EventUtil = {
    addHandler:function(element, type, handler){
        if(element.addEventListener()){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent()){
            element.attachEvent("on"+type,handler);
        }else{
            element["on"+type] = handler;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener()){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent()){
            element.detachEvent("on"+type,handler);
        }else{
            element["on"+type] = null;
        }
    }
}

Event object

Event objects contain all event-related information. All browsers support it.

• Event objects in DOM

  • Event type triggered by event.type

  • The object this = currentTarget = target inside the event handler

  • To handle multiple events through a function, you can use type

  • Prevent the default behavior of events, preventDefault(), assuming that the property of cancelable is true. stopPropagation() is used to immediately stop the propagation of events at the DOM level, i.e. to cancel event capture or bubbles. The premise is that bubbles are true.

  • EvetPhase property to determine which solution phase the event flow is currently in.

document.body.onclick = function(event){
    alert(event.currentTarget == document.body);
    alert(this == document.body);
    alert(event.target == document.body);//false
    alert(event.target == oUl);//true
}

ali[0].onclick = function(event){
    alert(event.eventPhase);
};//2

oUl.addEventListener("click",function(event){
    alert(event.eventPhase);
},true);//1

oUl.onclick = function(event){
    alert(event.eventPhase);
};//3

//When eventPhase equals2When, target，currentTarget，thisEqual

• Event Objects in IE

There are several different ways to access events in IE, depending on the method of specifying event handlers.

The Difference between Event Object in IE and Event Object in DOM

• Cross-browser Event Objects

var EventUtil = {
    getEvent:function(event){
        return event ? event : window.event;
    },
    getTarget:function(event){
        return event.target || event.srcElement;
    },
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    stopPropagation:function(event){
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    },
    addHandler:function(element, type, handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handler);
        }else{
            element["on"+type] = handler;
        }
    },
    removeHandler:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if(element.detachEvent){
            element.detachEvent("on"+type,handler);
        }else{
            element["on"+type] = null;
        }
    }
};

a1.onclick = function(event){
    event = EventUtil.getEvent();
    EventUtil.preventDefault(event);
};