Home > Developer > JavaScript
Everything in the world is ever-changing. Object-Oriented Programming is also a simulation of the real society. JavaScript is an object-based programming language that is very close to object-oriented programming, our web designers/programmers have to deal with JavaScript in order to write web pages more colorful. the first point is that JavaScript is not only used on the Web, but can be used in many fields. Of course, I will discuss more about the application of JavaScript on the Web, and mainly event applications.
JavaScript does not directly operate on Web objects. Instead, it uses the Document Object Modle (commonly heard DOM, Document model Object) provided by the browser to operate on objects. HTML is a tree document. It uses HTML tags as the root, and other elements are included in HTML tags and extended at a level. in DOM, window is the root object, and other objects are the sub-objects of window or its sub-objects.
First, let's take a look at the following code:
<Html> <pead> </pead> <body> <input type = "button" value = "this is a button" onclick = "window. alert (this. value); "/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
In a simple example, there is only one button on the page. Its value is "this is a button", and we have specified the onclick attribute for it. Its value is a line of JavaScript code, using the alert method of the window object, set this. the value content is displayed in the warning form. what is this here? This is the object of the current operation, that is, the input object. this code tells the browser that window is called when the current object is clicked. alert (this. value) This line of code, so the Browser executes related operations when the button is clicked. an object can have many events, such as clicking, double-clicking, mouse over, and mouse over, these events are often seen in various circulating code. so how to set the code executed when an event occurs for an object? Generally, there are three methods:
First: directly set the event attribute of the HTML element. The name is generally the on + event name. For example, the click event is onclick. For the instance, see the code above.
Type 2: Set the event attribute for the HTML object in the script. The name is generally the on + event name, for example, obj. onclick = function. See the instance code:
<Html> <pead> </pead> <body> <input type = "button" value = "this is a button" id = "mybut"/> </body> </ html>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Or:
<Html> <pead> </pead> <body> <input type = "button" value = "this is a button" id = "mybut"/> </body> </ html>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The second method has two methods to specify the code to be executed, but it is essentially the same. It also specifies a function to the object and requires the object to execute the function when an event occurs.
Method 3: Use the obj. attachEvent (IE browser)/obj. addEventListener method. We recommend that you use this method:
<Html> <pead> </pead> <body> <input type = "button" value = "this is a button" id = "mybut"/> </body> </ html>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Why is the third method recommended? The first method listed above is obviously only to set the element attribute and can only be specified once. The difference between the second method and the third method can be seen from the following instance:
<Html> <pead> </pead> <body> <input type = "button" value = "this is the second example button" id = "mybut1"/> <input type = "button" value = "this is the third example button" id = "mybut2"/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
In the preceding example, two buttons are used, and two functions are specified for the click event in the second and third modes, click the first button to see that the "specified second function" is displayed, indicating that only the MyButton_Onclick1_2 function takes effect, and the previously specified MyButton_Onclick1_1 is replaced by MyButton_Onclick1_2. Click the second button and you will see two pop-up forms. The displayed content is "the first function specified" and "the second function specified". Obviously, you can use attachEvent/addEventListener to add the program to be executed and retain the original program. In IE, they are executed in reverse order based on the added sequence, that is, the MyButton_Onclick2_2 added after execution, then execute MyButton_Onclick2_1, while in Firefox, execute MyButton_Onclick2_1 and then MyButton_Onclick2_2 .. No way. IE and Firefox are friends .. Haha
Well, I still have a project to catch up, so I have to write it here first. Recently, I am busy, huh, huh. In the next article, we plan to use the content of this article to write an application. The content is: use DHTML to simulate the span element as element A. It is also A follow-up article in this article, but it is not just about events, CSS is also used.
PS: I know the above content. If you have any improper content, please correct it. You do not have to give it to me. The content of this article is rigorous and will not mislead readers .. At the same time, he also called on competent netizens to join the original plan. I would like to thank the readers of this article and those who have supported the worry-free Script original plan.
Add another proprietary event-driven method (Named Script) for IE.
Although it is not recommended to write this statement, it is necessary as an introduction. If you only consider IE users, this method is convenient.
Named Script defines object events using the <script> label.
Syntax:
<SCRIPT
CLASS = classname
DEFER
EVENT = eventname
FOR = element
ID = value
LANGUAGE = JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS | XML
SRC = url
TITLE = text
TYPE = MIME-type
>
Other attributes are the same as the <script> tag we usually use. We will only introduce them more, mainly the event and for attributes. The event attribute indicates the event trigger execution of the script, and the for Attribute indicates the event-triggered object. Let's take a look at the example of hongting:
<Html> <pead> </pead> <body> <input type = "button" value = "this is a button" id = "mybut"/> </body> </ html>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
We should have seen that the effect is the same as that of other methods. Some people may say that since it is the same and its compatibility is not good, why should it be used like this? See the following example:
<Html> <pead> </pead> <body> <input type = "button" value = "This Is button 1" name = "mybut"/> <input type = "button "value =" This Is button 2 "name =" mybut "/> <input type =" button "value =" This Is button 3 "name =" mybut "/> <input type = "button" value = "This Is button 4" name = "mybut"/> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
In this example, there are multiple objects with the same name. (Note: It is name rather than id. In the DOM standard, id should be unique, although multiple objects with the same id can exist in IE, we do not recommend that you do this .) With only one Named Script, you can implement event-driven for these objects. The code is much easier and the modifications will be very convenient in the future. This is also the biggest advantage of Named Script.
The most common applications are on the form's Radio or Checkbox objects, because they generally have the same name and the same event driver. The specific application scope is very wide, you can find a large number of application instances in the worry-free script http://www.51j.com/, here only do some simple introduction, but many examples.Finally, I would like to reiterate that this method is only unique to IE and is not supported by other browsers.
Whether zookeeper Doc ument. all is null is the easiest way to judge whether the current browser is IE or Firefox, because IE has this object, but firefox does not.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
