Using a summary of events in DHTML

Source: Internet
Author: User
Dhtml

Providing an event-handling portal for a component can greatly improve the closure of the component while making the component very well communicated to the outside world. And this is one of the development patterns that we've been used to,. NET, DHTML, and so on, all provide a complete set of event-handling models. The following is a summary of the use of events in DHTML.

DHTML provides a way to use 3 of events, respectively:

1, Inline HTML: <element onxxx= ' handler ' ></ELEMENT>

This is the simplest and most commonly used method of event binding, but the OnXxx value here is handler is not quite certain. In fact, this handler position can place any legitimate JavaScript statements, because IE builds the DHMTL tree with an ' anonymous ' member method for the current element, onxxx the handler that points to the method. For example, we write, <element id= ' elmt ' onxxx= ' var abc = 0; for (Var i=0 i < i++) abc+=i; ></element> In fact, the following code structure exists in the DHMTL tree species:

function Anonymous ()
{
var abc = 0; for (Var i=0 i < i++) abc+=i;
}

This is the ELMT object in the anonymous method.

2, Event Property:object.onXXX = Handler

The use of this method is to assign the function name (handler) to the element's predefined event properties (OnXXX). Here are two questions to note:

One is that we are using OBJECT.ONXXX = handler to ensure that object is already generated in the page. For example, we give the event handler function for Document.body, we must ensure that document.body already exists, that is, we cannot use document.body in the global statement before <body>;

The second is that handler must be a function name, and using the handler in Method 1 can be any JavaScript statement different! Our most error-prone use is when we are accustomed to using <element id= ' elmt ' OnXXX = ' return false ' ></element> in inline HTML if this is used elmt.onxxx= ' return false; '. Then the rest of the dishes, there will be no effect, of course, ie also does not complain. The correct use is:

Elmt.onxxx = function () {return false;}

3. Named Script: <script for = Object EVENT = onclick>

IE exclusive support, not how to use, do not feel any special place ha. If you know the beauty of it, let it be heard.

The DOM provides two kinds of event-handling uses, namely:

1, attachevent method:

How to use: bsuccess = Object.attachevent (sevent, fpnotify). The explanation is copy MSDN.
Parameters
Sevent Required. String that specifies any of the standard DHTML Events.
Fpnotify Required. Pointer that specifies the function to call when sevent fires.
Return Value
Boolean. Returns one of the following possible values:true the function is bound successfully to the event.
False the function is not bound to the event.

The way DOM provides this event is actually a collection operation, and we can attach multiple event handlers on the same event signature multiple times, such as:

Window.attachevent (' onload ', handler1);
Window.attachevent (' onload ', handler2);
Window.attachevent (' onload ', handler3);
Window.attachevent (' onload ', handlern);

This n handler will be executed, but the order of execution is not guaranteed. Here is an exception, attachevent on Document.body attach event ' onload ' has no effect, but the ' onload ' of Attch window object is correct. Depending on the order in which the page is initialized, and document.body.attachEvent (' onload ', handler) returns True, this is due to a bug in IE.

Note the difference between the event property of DHTML and the way Dom Attachevent:

event property Way, when the event is triggered, the incident handler function is a parameterless function, and we can only read the event-related information through the properties of the window of the event. Attachevent method, when the event handler function is triggered, the first parameter of the function Arguments[0], and the default is the event on that window. What does that mean? No, see here.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.