Sometimes the project will not use jquery as such a good framework, you need to encapsulate some event objects and event handlers, such as encapsulating Ajax;
This is the most considered browser compatibility issues, the native JS package is as follows:
var eventutil={
node, event name, event handler function
Addhanler:function (Element,type,handler) {
if (Element.addeventlistener) {
Element.addeventlistener (Type,handler,false);//Here a parameter of false means that the event handler is called during the event bubbling phase, and true is called for the event capture phase
}
else if (element.attachevent)
{
Element.attachevent ("on" +type,handler),//IE8 and below only support event bubbling
}
else{
element["On" +TYPE]=HANDLER;//DOM0 supports only one event handler per event
}
}
Removehanler: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;//remove
}
}
Returns a reference to the event object
Getevent:function (event) {
return event?event:window.event;
}
Return event Destination
Gettarget:function (event) {
return event.target| | Envet.srcelement;
}
Cancel event default behavior
Preventdefault:function (event) {
if (Event.preventdefault) {
Event.preventdefault ();
}
else{
Event.returnvlaue=false;
}
}
Block Event Flow
Stoppropagation:function (event) {
if (event.stoppropagation) {
Event.stoppropagation ();
}
else{
Event.canclebubble=true;
}
}
}
JS cross-Browser Event object, event handler