Home > Developer > JavaScript
Author: weeping hongting
In the previous article "event-driven programming", I talked about three ways to bind events to elements. The third method is recommended, that is, binding events using attachEvent/addEventListener. the purpose of the previous article is to show you how to use events. The purpose of this article is to help you understand how to flexibly apply events to batch process a certain type of object behavior.
First, let's talk about the concept of event transfer. What is event transfer? For example, if someone has pinched your finger, you may say that he has pinched your finger or that he has pinched your hand, he may even say he has pinched you. in fact, there are similar cases in the execution of browser events. See the following example:
<Html id = "HTMLElement" onclick = "alert (this. id); "> <pead> <title> test page </title> </pead> <body> <table id =" TABLEElement "onclick =" alert (this. id); "> <tbody id =" TBODYElement "onclick =" alert (this. id); "> <tr id =" TRElement "onclick =" alert (this. id); "> <td id =" TDElement "onclick =" alert (this. id); "> <input type =" button "id =" ButtonElement "onclick =" alert (this. id); "value =" button "/> </td> </tr> </tbody> </table> </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, The onclick event processing function is set for Input [type = button], td, tr, tbody, table, body, html, document, and window, the id value of the current object is displayed. After you click it, IE will show ButtonElement, TDElement, TRElement, TBODYElement, bodyObject, HTMLElement, and documentObj in sequence, while Firefox is slightly different, it also displays windowObj after documentObj is displayed, but IE does not, because the window object of IE does not have the onclick event. From this we can see that these objects have been clicked, and The onclick event function is executed, and the sequence is from the event source object to the upload until the window object, which is the browser event transmission.
This article focuses on how to process events of a class of elements, and the key knowledge lies in the transfer of events. Specify ument. Let's look at another example:
<Html> <pead> <title> test page </title> </pead> <body> carefree script Forum 1 carefree script Forum 2 </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The upper-side example binds the upload Doc ument to a click event processing function Links_Onclick. In this example, I obtain the event source object and display its innerHTML value. It can be seen that whether in IE or Firefox, when you click carefree script Forum 1, "Carefree script Forum 1" is displayed. When you click carefree script Forum 2, there will be carefree script Forum 2, now I understand why I have to pay a weekly stamp to talk about event transfer? We need to use this to simulate the span element as a connection element as the title of the article.
Analyze the general features of the connection elements:
1. underlined
2. Move the mouse to a hand mouse
3. Click it to enter a page (href attribute)
4. You can set the target window name (target attribute)
The next step is to implement the above features. The first step is to underline and move the mouse to turn the mouse into a hand-shaped mouse. This is very simple. You can use CSS and it has nothing to do with the script. See the example below:
<Html> <pead> <title> test page </title> <style type = "text/css"> span. link {text-decoration: underline; color: blue; cursor: pointer ;} </style> </pead> <body> carefree Script 1 carefree Script 2 </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The ument object is bound to an onclick handler. If the tagName of the event source object is span, its class attribute value is link and it has a non-empty href attribute, call window. open the url saved by the href attribute.
<Html> <pead> <title> test page </title> <style type = "text/css"> span. link {text-decoration: underline; color: blue; cursor: pointer ;} </style> </pead> <body> carefree Script 1 carefree Script 2 </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Click the above sample code simulated "connection", the browser will be connected to the carefree script Forum (http://www.51js.com), the third feature is also achieved. Firefox does not support direct use of src. href is used to obtain the custom href attribute. Therefore, the getAttribute (attributeName) method supported by IE and Firefox is used. If it does not exist, null is returned.
The final task is to add the target attribute to implement the target window setting function. Note that the target attribute is dispensable and the implementation method is very simple. You can easily implement it using the above instance, is in the window. open has a little bit of hands and feet. Please refer to the sample code:
<Html> <pead> <title> test page </title> <style type = "text/css"> span. link {text-decoration: underline; color: blue; cursor: pointer ;} </style> </pead> <body> carefree Script 1 carefree Script 2 </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Done! We have initially simulated span elements with specific attributes into hyperjoin elements. Of course there are still many articles to do here, but this is not the focus, it is of no practical value to simulate the span element into A hyperjoin. After all, there is already A very useful A element for us to use, so we need to understand one thing: to understand the transmission of events, and use it to do some previously troublesome work for us. This is the focus of this article.
Well, it's coming to an end again. The topic of the next article is not fixed yet. It is estimated that another instance or another topic will be created, so stay tuned.
Interested comrades are welcome to support the original operations of the carefree script Forum, share your original articles with netizens, and remember the words in this article: those who have helped us never thought about how to get a reward. If they have to say yes, they also hope that you can help those who need help as they do.
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
