JScript|Event] Event-driven programming (2)--Explanation with examples: Simulating span into a hyperconnection_javascript skills

Author: Qi Hongting
In the previous article "Event-driven Programming" I talked about three methods of binding events to elements, and the third method is recommended, that is Use attachEvent/addEventListener to bind. The purpose of the previous article was to tell you how to use events, and the purpose of this article is to let you understand how to flexibly apply events to batch process a certain type of object behavior.

First of all, let’s talk about the concept of event delivery. What is event delivery? For example, if someone pinches your finger, you may say that he pinched your finger, or you may say that he pinched you. hand, and may even say that he pinched you. In fact, all three statements are correct, and there are similar situations in the execution of browser events. Please see the following example:

<title>Test page</title> <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="按钮"></td> </tr> </tbody> </table>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

The above example gives Input[ type=button], td, tr, tbody, table, body, html, document, and window all have onclick event processing functions, which all display the id value of the current object. After clicking, IE will appear ButtonElement, TDElement, TRElement, and TBODYElement in sequence. , bodyObject, HTMLElement, documentObj, but Firefox is a little different. After it displays documentObj, it will also display windowObj, but IE does not. This is because IE's window object does not have an onclick event. It can be seen from here that these objects have been clicked, and the onclick event function has been executed, and the order is uploaded from the event source object to the window object. This is the browser's event delivery.

How to handle events of a type of element is the focus of this article, and the key knowledge lies in the transmission of events. As can be seen from the above example, no matter where the object triggers an event, it will eventually be passed upward. What we have to do is to process it on the only way the event must pass. It is recommended to use window.document. Let’s look at another example:

<title> </title>Test page <a href="http://www.51js.com" target="_blank"> </a>Worry-free Script Forum 1<a href="http://www.51js.com" target="_blank"> </a>Worry-free Script Forum 2
[Ctrl A Select all Note:

If you need to introduce external Js, you need to refresh to execute
]

The above example is for window. The document is bound to a click event handler function Links_Onclick. In it, I obtain the event source object and display its innerHTML value. It can be seen that whether in IE or Firefox, when clicking on the Wuyou Script Forum 1, " Wuyou Script Forum 1" will be displayed. Script Forum 1", when you click Wuyou Script Forum 2, Wuyou Script Forum 2 will appear. Now you understand why I have to spend so much time talking about event delivery, right? We are going to take advantage of this to achieve what the title of the article says: simulate span elements into connection elements.

Analyze the general characteristics of connecting elements:

1. Underlined
2. Move the mouse up and it will turn into a hand mouse
3. Click to enter a certain page (href attribute)
4. You can set the name of the target window (target attribute)

Next, implement the features mentioned above step by step. First, the underline and the mouse will turn into a hand mouse when moved up. This is very simple, just use CSS, it doesn’t have to do with scripts, please see the example: <title> </title> <style type="text/css"> span.link { text-decoration:underline; color:blue; cursor: pointer; } </style>Test page <span class="link"> </span> <span class="link">Worry-free Script 1</span> Worry-Free Script 2
[Ctrl A select all Note:

If you need to introduce external Js, you need to refresh to execute ]
接下来是实现“点击之后会进入某一个页面”，可以给span元素增加一个属性href保存url，同时处理它的onclick事件，这就要用到刚才我说了半天的事件传递，思路是给window.document对象绑定一个onclick处理函数，如果事件来源对象的标签名（tagName）是span，它的class属性值为link，并且它拥有一个非空href属性，就调用window.open打开href属性所保存的url。

<title>测试页面</title> <style type="text/css"> span.link { text-decoration:underline; color:blue; cursor: pointer; } </style> <script type="text/javascript"> function Document_Onclick(e) { var src = window.document.all != null ? e.srcElement : e.target; if(src.tagName != null && src.className != null && src.getAttribute("href") != null && src.tagName.toString().toLowerCase() == "span" && src.className.toString().toLowerCase() == "link" && src.getAttribute("href").toString().length > 0) { window.open(src.getAttribute("href").toString()); } } if(window.document.all != null) window.document.attachEvent("onclick", Document_Onclick); else window.document.addEventListener("click", Document_Onclick, false); </script> <span class="link" href="http://www.51js.com">无忧脚本1</span> <span class="link" href="http://www.51js.com">无忧脚本2</span>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

点击上边示例代码所模拟出来的“连接”之后，浏览器会连接到无忧脚本论坛(http://www.51js.com)，第三个特点也实现了。在这里特别说明一下：Firefox不支持直接使用src.href获取我们自定义的href属性，因此使用了IE和Firefox都支持的getAttribute(attributeName)方法，如果不存在则返回null。

最后的工作是增加target属性实现设置目标窗口的功能，要注意一点就是target属性是可有可无的，实现方法很简单，利用上边的实例就可以轻松实现，就是在window.open那里做一点点手脚，请看示例代码：

<title>测试页面</title> <style type="text/css"> span.link { text-decoration:underline; color:blue; cursor: pointer; } </style> <script type="text/javascript"> function Document_Onclick(e) { var src = window.document.all != null ? e.srcElement : e.target; if(src.tagName != null && src.className != null && src.getAttribute("href") != null && src.tagName.toString().toLowerCase() == "span" && src.className.toString().toLowerCase() == "link" && src.getAttribute("href").toString().length > 0) { if(src.getAttribute("target") != null && src.getAttribute("target").toString().length > 0) window.open(src.getAttribute("href").toString(), src.getAttribute("target").toString()); else window.open(src.getAttribute("href").toString()); } } if(window.document.all != null) window.document.attachEvent("onclick", Document_Onclick); else window.document.addEventListener("click", Document_Onclick, false); </script> <span class="link" href="http://www.51js.com" target="_blank">无忧脚本1</span> <span class="link" href="http://www.51js.com" target="_self">无忧脚本2</span>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

搞定！我们已经初步将拥有特定属性的span元素模拟成了超连接元素，当然这里边还大有文章可做，但这并不是重点，而且将span元素模拟成超连接并没有什么实用价值，毕竟已经有那么好用的A元素可以供我们使用，所以要弄明白一点：搞清楚事件的传递，并且利用它为我们做一些本来很麻烦的工作，这才是本文的重点。

好了，又要告一段落了，下一篇文章的主题还没定，估计是再来一个实例或者另开一个主题，敬请期待。

欢迎有兴趣的同志支持一下无忧脚本论坛的原创行动，一起将您的原创文章贴出来与网友分享，还记得一篇文章里说过这样的话：那些曾经帮助我们的人们，他们没有想过要得到回报，如果硬要说有，那也是希望你能够像他们那样帮助需要帮助的人。