Javascript cross-browser dom Event Encapsulation

The cross-browser event processing function binding provided in the previous JS interview question cross-browser event processing function binding lacks cross-browser processing for event objects. Complete it here. In a DOM-compatible browser, no matter the DOM0 level (element. onX... SyntaxHighlighter. all ();

 

The cross-browser event processing function binding provided in the previous JS interview question cross-browser event processing function binding lacks cross-browser processing for event objects. Complete it here.

In a DOM-compatible browser. onXXX = handler) or DOM2 (element. addEventListener) to bind the event handler. The event object is passed in as a parameter of the event handler. However, in IE, using the DOM0-level method to bind event Handlers does not pass in the event object as a parameter, but as an attribute of the window object. Therefore, the following code is required to obtain an event object across browsers:

Element. onclick = function (event ){

Event = event | window. event;

}

The standard event object contains the following attributes and methods:

Attribute/method type read/write description

Bubbles Boolean read-only indicates whether the event will bubble

Cancelable Boolean read-only indicates whether the default event behavior can be canceled

CurrentTarget Element is read-only, which is the Element bound to the event processing function. It is not necessarily the event Target Element, because the event can bubble to the upper-Layer Element bound to the corresponding event.

EventPhase Integer read-only calls the phase of the event handler: 1. Capture Phase 2. Target 3. Bubble phase

TypeString read-only event type

Target Element: the target Element of the read-only event, for example, the deepest Element in the clicked dom.

The default behavior of the read-only cancellation event of the preventDefault Function. This method is valid only when event cancelable is true.

StopPropogation Function read-only cancels further event bubbling or capturing.

The IE event object contains the following attributes:

Attribute/method type read/write description

The default value of cancelBubble Boolean read/write is false. Setting it to true can prevent event bubbling.

The default read/write value of returnValue Boolean is true. If it is set to false, the default behavior of the event can be canceled, but no other attribute can indicate whether the event is valid.

TypeString read-only event type

The target Element of the srcElement Element read-only event, which is the same as the target attribute in the DOM event.

Based on the comparison above, the scenarios that are compatible with processing include event.tar get and event. srcElement, event. stopPropogation and event. cancelBubble, event. preventDefault, and event. returnValue. A cross-browser event object type can be provided to handle compatibility issues.

1

LIZ. dom. Event = function (event ){

2

Event = event | window. event;

3

This. type = event. type;

4

This.tar get = event.tar get | event. srcElement;

5

 

6

This. preventDefault = function (){

7

If (event. preventDefault ){

8

Event. preventDefault ();

9

} Else {

10

Event. returnValue = false;

11

}

12

};

13

 

14

This. stopPropogation = function (){

15

If (event. stopPropogation ){

16

Event. stopPropogation ();

17

} Else {

18

Event. cancelBubble = true;

19

}

20

};

21

 

22

// To provide a little flexibility, a getEvent method is provided here to return a real event object

23

This. getEvent = function (){

24

Return event;

25

};

26

 

27

Return this;

28

};

In this way, in LIZ. dom. in the addEventListener process, use LIZ to pass in the event handler to it. dom. you can use cross-browser Event objects in event processing functions.

1

AddEventListener: function (element, type, handler ){

2

 

3

Var observer = this. getData (element, 'observer '),

4

ProxyHandler = function (event ){

5

Observer. fire (new LIZ. dom. Event (event ));

6

};

7

If (! Observer |! (Observer instanceof LIZ. patterns. Observer )){

8

Observer = new LIZ. patterns. Observer (element );

9

This. setData (element, 'observer', observer );

10

}

11

If (typeof observer [type] = 'undefined '){

12

If (element. addEventListener ){

13

Element. addEventListener (type, proxyHandler, false );

14

} Else if (element. attachEvent ){

15

Element. attachEvent ('on' + type, proxyHandler );

16

} Else {

17

Element ['on' + type] = proxyHandler;

18

}

19

}

20

Observer. addListener (type, handler );

21

}