Javascript-event Handling

Objective:

Click,load,mouseover are the names of the Events.

And Onclick,onload,onmouseover is the event handler that responds to the event

There are several ways to handle JavaScript event handling

1.HTML Event handlers　　

<input type= ' button ' value= ' click on Me ' onclick= ' alert (' ah! Got hit by you ') '/>

2.dom0 Level Event handlers

<input type= ' button ' value= ' click on Me ' id= ' mybtn '/>

var btn =document.getelementbyid (' mybtn ');

Btn.onclick=function () {

Alert (' ah! Was hit again, this time is the Dom0 event ');

}

3.dom1 Level Event handlers

No!!! Straight is Dom2, the ghost knows Why.

3 (real 3rd) Dom2 level event handlers

<input type= ' button ' value= ' click on Me ' id= ' mybtn '/>

var btn =document.getelementbyid (' mybtn ');

Btn.addeventlistener (' Click ', function () {

Alert (' The third time is hit, Dom2 don't go after school ');

},false);

False: represents the bubbling phase of adding an event handler to the event stream, which can be used to the fullest extent compatible with the Browser.

If you want to delete the event handler, call the

Btn.removeeventlistener (' Click ', function () {

Alert (' The third time is hit, Dom2 don't go after school ');

},false);

The AddEventListener () and RemoveEventListener () functions above, The second parameter looks the same, but is actually two different anonymous functions. To solve this problem, you need to

var handler=function () {

Alert (' The third time is hit, Dom2 don't go after school ');

}

Btn.addeventlistener (' Click ', handler,false);

Btn.removeeventlistener (' Click ', handler,false);

4.IE Event handlers

Because of our Internet Explorer Anti-day incompatibility, ie itself built two event handler Functions.

<input type= ' button ' value= ' click on Me ' id= ' mybtn '/>

var btn =document.getelementbyid (' mybtn ');

var handler=function () {

Alert (' The third time is hit, Dom2 don't go after school ');

}

Btn.attachevent (' Oncick ', handler);

Delete Event Action

Btn.detachevent (' onclick ', handler);

5. Front high-energy, Big Boss to Attack.

In order to solve the Cross-browser problem, instead of using the DOM event handler in the project all of a sudden, IE event handler

We write an object eventutil, the object literal method for it to add properties, after writing it, Cross-browser can be once and for All.

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;

}

}

6. Cross-browser Event Objects

The Cross-browser event handlers are described earlier

The next step is to introduce the Cross-browser event object, ie in all the information and methods of the event object in the DOM object, but the implementation is not the same way.

Or the object that was just Eventutil.

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;

}

}

　　　　

　　

Javascript-event Handling