Javascript event processing (2) -- cross-browser Programming

Difference between IE and Dom Browser

In various examples in Javascript event processing (I)-basic principles, the event listening generated by addeventlistener () is valid in chrome and firfox, but is invalid in IE, this is because IE implements two methods similar to those in Dom: attachevent () and detachevent (). The method value Dom is similar. The difference is that IE only supports event bubbling, therefore, the events added by attachevent () are processed.ProgramWill be addedBubble stage. DetailsCodeAs follows:

<Button id = '  Mybutton5  ' > Button5 </button>
<SCRIPT type = '  Text/JavaScript  ' >

VaR Bn5 = Document. getelementbyid ( '  Mybutton5  ' );
Bn5.attachevent ( '  Onclick  ' , Function (){
Alert ( '  IE attachevent  ' );
});

Bn5.detachevent ( '  Onclick ' , Function (){
 //  Do something  
 });

</SCRIPT>

It differs from Dom:

1. When the first parameter of attachevent () is "onclick", addeventlistener () is "click ".

2. different scopes. The handler in attachevent () will run in the global scope, this is equal to the window, and in dom-level methods, the handler will run in the scope of the element to which it belongs.

3. Both attachevent () and addeventlistener () can add multiple event handlers to the same element. Dom is executed in the order of adding them, while IE is executed in the reverse order.

 

Cross-browser event handler

1. Write your own program. The principle is very simple. First, check the browser's capabilities and then add a method. For details:

<Button id ='  Mybutton7  ' > Button7 </button>
<SCRIPT type = '  Text/JavaScript  ' >
 VaR Eventutil = function (){};
Eventutil. Prototype. addhadler = function (element, action, hadler ){
 If (Element. addeventlistener ){
Alert ( '  Addeventlistener Function ' );
Element. addeventlistener (action, hadler, False );
}
 Else   If (Element. attachevent ){
Alert ( '  Attachevent Function  ' );
Element. attachevent ( '  On  ' + Action, hadler );
}
Else {
Alert ( '  Element ["on" + action]  ' );
Element [ '  On  ' + Action] = hadler;
}
}

Eventutil. Prototype. removehadler = function (element, action, hadler ){
 If (Element. removeeventlistener ){
Element. removeeventlistener (action, hadler,False );
}
 Else   If (Element. detachevent ){
Element. detachevent ( '  On  ' + Action, hadler );
}
 Else {
Element [ '  On  ' + Action] = Null ;
}

}

 VaR Hadlerfunction = function (){
Alert ( '  Hadlefunction  ' );
}

 VaR Bn7 = Document. getelementbyid ( '  Mybutton7  ' );
 VaR Eu = New Eventutil ();

EU. addhadler (bn7, '  Click  ' , Hadlerfunction );


</SCRIPT>

For the sake of consideration, I used the object-oriented logic to create an object named eventutil. It has two methods: addhadler and removehadler, which are used to register and delete Event Handlers respectively.

2. jquery class library

Jquery is a class library of JavaScript, which can greatly simplify JavaScript programming.

<SCRIPT type = '  Text/JavaScript  ' Src = ' ./Jquery. js  ' > </SCRIPT>
<SCRIPT type = '  Text/JavaScript  ' >
$ (Document). Ready (function (){
$ ( '  # Mybutton6  ' ). Click (function (){
Alert ( '  Jquery button6  ' );
});
});
</SCRIPT>


<Button id = '  Mybutton6  ' > Button6 </button>

These two articlesArticleIt is mainly about your own learning notes. For most of the content, see the event chapter in Javascript advanced programming.