Home > Web Front-end > JS Tutorial > JavaScript events compatible with various browsers_javascript skills

JavaScript events compatible with various browsers_javascript skills

WBOY
Release: 2016-05-16 16:16:11
Original
1287 people have browsed it

Call event:

Event Object
What is an event object? When an event is triggered on the dom, an event object event will be generated. For example, when the mouse clicks, the type of click will be generated, and the
emitted by that element will also be generated. The type attribute of the dom event object is used to obtain the event object. The target attribute is used to obtain the event target. The stopPropagation() method prevents the event from bubbling. preventDefault prevents the default behavior of the event
The type attribute of the event object in IE is used to obtain the event object, and the srcElement attribute is used to obtain the event target. The cancelBubble attribute is used to prevent the event from bubbling. When set to true, it means blocking. False means not blocking
returnValue attribute is the default behavior for blocking events. When set to false, it means blocking

Copy code The code is as follows:

// Compatible with various browsers Cross-browser event processing ------- Unified encapsulation
var EventHandle = {
// element: element, type: click event, handle: execution method
//Add handle
AddEventHandle: function (element, type, handler) {
           if (element.addEventListener) {
                 element.addEventListener(type, handler, false);//---false //Represents bubbling dom2 level
}
         else if (element.attachEvent) {
              element.attachEvent("on" type, handler);
         } else {
               element["on" type] = handler;
}
},
//Delete handle Event handling does not work
​ removeEventHandle: function (element, type, handler) {
If (element.removeEventListener) { // Support dom2 level event processing type is onclick
                 element.removeEventListener(type, handler, false); //---false //Represents bubbling
}
         else if (element.detachEvent) {
                element.detachEvent("on" type, handler); //Supports IE
         } else {
              element["on" type] = null;//dom0 level event processing traditional click event
}
},
//Get the event object, all objects compatible with the browser
GetEvent: function (event) {
            return event? event: window.event; //What is needed in lower versions of IE browser is window.event
},
//Get the event type Is it a click or mouse movement
GetType:function(event){
         return event.type;
},
//Get the current element
GetElement: function (event) {
          return event.target || event.srcElement;
},
//Default behavior of blocking events
: function (event) {
If (event.preventDefault) {
             event.preventDefault();
}
         else {
              event.returnValue = false;
}
},
//Prevent events from bubbling
StopPropagation: function (event) {
If (event.stopPropagation) {
              event.stopPropagation();
}
         else {
              event.cancelBubble = true;
}
}
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template