FF, chrome and IE event handlers

Today I learned about JS event processing programs. The methods for handling events are different for IE and FF, chrome, Safari, and opera. FF, chrome, Safari, and Opera Support addeventlisener, addeventlistener is a function defined by dom2. ie does not support dom2. Therefore, to handle cross-browser events, you need to perform different processing for IE, FF, chrome, Safari, and opera.

1. event stream

The first thing to record is the event stream. The event stream has three stages: Event capture stage, target stage, and event bubble stage. In the target stage, event processing is considered part of the bubble stage.

The dom0-level event handler directly assigns an event handler attribute to the element, such:

VaR BTN = Document. getelementbyid ("BTN ");

BTN. onclick = handler;

Dom2-level event handler, using addeventlistener and removeeventlistener, such as binding a click event to ele:

Ele. addeventlistener ("click", handler, false); // when the third parameter is false, it indicates the bubble stage, and when it is true, it indicates the event capture stage;

 

2. ie event handler

IE does not support addeventlistener, but you can use attachevent and detachevent to process events, such as binding click events to ele:

Ele. attachevent ("onclick", Handler );

Note: It is onclick rather than click. If you use attachevent, this in the function for event processing is a global object, that is, this = Window.

It can be verified as follows:

VaR ul = Document. getelementbyid ("Ul ");
Ul. attachevent ("onclick", function (event ){
Console. Log (this = Window );
});

 

 

3. event, event object handler will accept an event object

Addeventlistener processes events received in an event. common attributes:

Target: Target Element

Currenttarget: current target Element

Preventdefault (): block default behavior

Stoppropagation (): prevents event Propagation

Type: Event Type

 

Attachevent processes events received in events. common attributes:

Srcelement: Target Element

Returnvalue: If it is false, the default action is blocked. The default value is true.

Cancelbubble: if it is true, the event is blocked. The default value is false.

Type: Event Type

Different from non-ie event processing, it is encapsulated into a cross-browser event processing:

1 var eventutil = {
2 addevent :( function (type, handle, element ){
3 if (element. addeventlistener ){
4 element. addeventlistener (type, handle, false );
5} else if (element. attachevent ){
6 element. attachevent ("On" + type, handle); // IE
7} else {
8 element ["on" + type] = handle;
9}
10
11 }),
12
13 removeevent :( function (type, handle, element ){
14 if (element. removeeventlistener ){
15 element. removeeventlistener (type, handle, false );
16} else if (element. detachevent ){
17 element. detachevent ("On" + type, handle); // IE
18} else {
19 element ["on" + type] = NULL;
20}
21 }),
22
23 getevent :( function (event ){
24 return event? Event: window. event;
25 }),
26
27 gettarget :( function (event ){
28 if(event.tar get ){
29 return event.tar get;
30} else if (event. srcelement ){
31 return event. srcelement; // IE
32}
33 }),
34
35 preventdefault :( function (event ){
36 IF (event. preventdefault ){
37 event. preventdefault ();
38} else {
39 event. returnvalue = false;
40}
41 }),
42
43 stoppropagation :( function (event ){
44 If (event. stoppropagation ){
45 event. stoppropagation ();
46} else {
47 event. cancelbubble = true;
48}
49 }),
50
51 relatedelement :( function (event ){
52 If (element. relatedelement ){
53 return element. relatedelement;
54} else if (element. toelement ){
55 return element. toelement; // ie mouseout
56} else if (element. fromelement ){
57 Return element. fromelement; // ie Mouseover
58}
59 })
60}; view code

 

 

 

FF, chrome and IE event handlers