Home > Web Front-end > JS Tutorial > JavaScript Advanced Programming Second Edition Chapter 12 Summary of Event Key Points (Commonly Used Cross-Browser Detection Methods)_Javascript Skills

JavaScript Advanced Programming Second Edition Chapter 12 Summary of Event Key Points (Commonly Used Cross-Browser Detection Methods)_Javascript Skills

WBOY
Release: 2016-05-16 17:50:24
Original
851 people have browsed it
Copy code The code is as follows:

var EventUtil={ //Cross-browser handler --- Create Method
addHandler:function(element,type,handler){
if(element.addEventListener){
element.addEventListneter(type,handler,false);
}else if(element.attachEvent) {
element.attachEvent("on" type,handler);
}else{
element["on" type]=handler;
}
}
removeHandler:function( element,type,handler){ //Cross-browser handler---removal method
if(element.removeEventListener){
element.removeEventListneter(type,handler,false);
}else if( element.detachEvent){
element.detachEvent("on" type,handler);
}else{
element["on" type]=handler;
}
}
getEvent:function(event){ //Cross-browser event object---return a reference to the event object
return event?event:window.event;
}
getTarget:function(event){ // Cross-browser event object---return the target of the event
return event.target||event.srcElement;
}
preventDefault:function(event){ //Cross-browser event object---cancel Default event
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
}
stoppropagation:function (event){ //Cross-browser event object---block event flow
if(event.stoppropagation){
event.stoppropagation();
}else{
event.canceBubble=false ;
}
}
getRelatedTarget:function(event){ //Get related elements across browsers
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return envent.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
}
getButton:function(event){ //button attribute detection of mouse event
if(document.implementation.hasFeature("MouseEvent","2.0")){
return event. button;
}else{
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2
case 4:
return 1
}
}
}
getCharCode:function (event){ //Cross-browser character encoding---charCode attribute detection
if(typeof event,charCode=="number"){
return event.charCode;
}else{
return event.keyCode;
}
}
}

Event delegation: a solution to too many event handlers, reducing memory and improving performance;
Simulating events: This is more complicated and needs to be studied slowly;
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