DHTML event processing-Analysis and Comparison of IE and Netscape-conversion to "Java and mode", good article

Http://www.yesky.com/20020415/1606944_6.shtml

Event Processing in DHTML

Event processing in the browser's Dom (Document Object Model) model adopts the responsibility chain mode. This section first examines the DHTML event processing of the Netscape browser, and then studies the event model of Internet Explorer.

Netscape event model

The event processing mechanism of Netscape is called event capturing ). In the event capturing mechanism, an event is propagated down from the top layer of the Dom, that is, the window object is the first to receive the event, and then the Document Object, in this case, the object generated by the event is the last one that is connected to the event.

If an object captures an event, you only need to call the captureevent () method, you only need to use the releaseevents method for this object. The following is a simple example of event capture and transfer.

Figure 12. A Netscape example.

In this example, there is a textbox and two buttons, one is called "capture event". clicking the button will capture the Click Event of the webpage, and the count in the text box will be added; the other is called "Release event". clicking a button will prevent the Click Event of the webpage from being captured.

To capture a click event, you must call the captureevent () method. To prevent the click event from being captured, you must call the releaseevent () method. The following is the specific HTML and JavaScript code.

 

Code List 6: JavaScript and HTML source code.

Obviously, an event can be handled on several different levels, which is an inpure responsibility chain model.

Internet Explorer event model

Internet Explorer handles events in a similar and different way than Netscape. When an event occurs on a webpage browsed by Internet Explorer, Internet Explorer uses DHTML's "event bubbling" to handle the event. The Dom model of Internet Explorer is an HTML object hierarchical structure and event processing mechanism. In the Dom, each HTML tag is a DOM object, and each DOM object can generate one (or more) of the several events defined in advance ). Such an event will first occur on the object to which the event belongs, then spread to the container object to which the object belongs, and so on. Therefore, the event floating mechanism is the opposite of the event capture mechanism.

In the event bubbling mechanism, the object that generates the event first receives the event. Then, events are propagated upwards according to the hierarchical structure of the object. For example, if a div contains a form and a button in the form, when The onclick event of the button is generated, The onclick Event code of the form will be executed. Then, the event is uploaded to the DIV object. If the onclick event of the DIV object has any code, the code will be executed, and the event continues to go up along the DOM structure.

To prevent events from spreading upwards, you can set the cancelbubble attribute to true on any node of the event chain.

Internet Explorer provides event handles for almost all HTML identifiers. Therefore, Internet Explorer does not need the captureevents () and releaseevents () Methods to capture and release events. The following JavaScript statement specifies the onclick event processing method of the Document Object:

Document. onclick = functionname;

The following statement stops the processing of The onclick event by the Document Object.

Document. onclick = NULL;

Because the event processing property is assigned null, document has no way to handle this event. In other words, the null value disables event processing for this object. This method can use any object and any event. Of course, this practice does not apply to Netscape.

As in Netscape, a Boolean value can be returned for an event processing method. For example, whether clicking a hyperlink tag causes browser follow-up depends on whether the onclick event of the hyperlink tag returns true.

In order to display the event floating mechanism in Internet Explorer, this section provides the following example. A form contains a button. For details, see:

Figure 13. An Internet Explorer example.

For the HTML code, see the following:

 

 

Code List 7: JavaScript and HTML source code.

When the onclick event of mybutton occurs, the mybutton event processing is first triggered, and the following dialog window is displayed:

Figure 14. event processing of the mybutton object is triggered.

Then the event will float to the object at the upper level, that is, the myform object, like a bubble. The following dialog box is provided for event processing of the myform object:

Figure 15. event processing of the myformn object is triggered.

After that, the event continues to float to the object at a higher level, that is, the body. At this time, the event processing of the Document Object is triggered, and the following Object window is provided:

Figure 16. event processing of the Document Object is triggered.

This is the event bubbling mechanism.

Obviously, these three-level objects form a chain of responsibility, and events are commands or requests. When an event is transmitted along the responsibility chain, the objects on the responsibility chain can choose to process or not handle the event, whether or not the event is processed at a certain level, you can stop or continue the event. This is a non-pure responsibility chain model.