JScript|Event]面向事件驱动的编程(二)--实例讲解:将span模拟成超连接

作者:泣红亭 
在上一篇文章《面向事件驱动的编程》中我讲了三种将事件绑定到元素的方法,而推荐使用第三种方法,即使用attachEvent/addEventListener来绑定.上一篇文章的主旨是告诉大家如何使用事件,而这一篇文章的主旨是让大家弄懂如何灵活应用事件来批处理某一类的对象行为.

首先讲一讲事件传递的概念.什么是事件传递?举个现实的例子,有个人捏了一下你的手指,你可能会说他捏了你手指,也可能会说他捏了你的手,甚至可能会说他捏了你.事实上三种说法都没错,在浏览器事件的执行中亦有相似的情况,请看下边的例子:

测试页面

function Object_Onclick()
{
alert(this.id);
}
window.id = "windowObj";
window.onclick = Object_Onclick;
window.document.id = "documentObject";
window.document.onclick = Object_Onclick;
window.document.body.id = "bodyObject";
window.document.body.onclick = Object_Onclick;

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

上边的例子给Input[type=button]、td、tr、tbody、table、body、html、document、window都设置了onclick事件处理函数,都是显示当前对象的id值,点击之后IE会依次出现ButtonElement、TDElement、TRElement、TBODYElement、bodyObject、HTMLElement、documentObj,而Firefox则有一点不同,它显示完documentObj之后还会显示windowObj,而IE却不会,这是因为IE的window对象没有onclick事件。从这里可以看出这些对象都受到了点击,执行了onclick事件函数,而且顺序是从事件来源对象一直往上传直到window对象,这就是浏览器的事件传递。

如何对一类元素的事件进行处理,这是本文的重点,而重点知识又在于事件的传递。从上边的例子可以看出,不管是哪里的对象引发了一个事件,最后都会往上传递,我们要做的是在事件的必经之路上处理它,建议使用window.document。再看一个例子:

测试页面

无忧脚本论坛1
无忧脚本论坛2

function Links_Onclick(e)
{
var src = window.document.all != null ? e.srcElement : e.target; //获取事件来源对象
alert(src.innerHTML);
}
if(window.document.all != null)
window.document.attachEvent("onclick", Links_Onclick)
else
window.document.addEventListener("click", Links_Onclick, false);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

上边的例子给window.document绑定了一个点击事件处理函数Links_Onclick,在里边我获取了事件来源对象,并且显示它的innerHTML值,可以看出不管在IE还是在Firefox,点击无忧脚本论坛1的时候会显示"无忧脚本论坛1",点击无忧脚本论坛2的时候会无忧脚本论坛2,这下明白为什么我要大费周章讲事件传递了吧?我们正是要利用这一点,实现文章标题所说的:将span元素模拟成连接元素。

分析一下连接元素的一般特点:

1、有下划线
2、鼠标移动上去会变成手型鼠标
3、点击之后会进入某一个页面(href属性)
4、可以设置目标窗口的名称(target属性)

接下来一步一步实现上边所举的特点,首先是下划线和鼠标移动上去会变成手型鼠标,这个很简单,用CSS即可,可以与脚本无关,请看示例:

测试页面

span.link
{
text-decoration:underline;
color:blue;
cursor: pointer;
}

无忧脚本1
无忧脚本2

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

测试页面

span.link
{
text-decoration:underline;
color:blue;
cursor: pointer;
}

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);

无忧脚本1
无忧脚本2

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

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

测试页面

span.link
{
text-decoration:underline;
color:blue;
cursor: pointer;
}

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);

无忧脚本1
无忧脚本2

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

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

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

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

(0)

相关推荐

  • 深入理解javaScript中的事件驱动

    javascript中的事件驱动是通过 鼠标或热键 的动作引发的  主要事件如下:1.鼠标单击事件 onclick   如:( <input type="button" value="鼠标单击" onclick="执行语句.处理" />) 通常用于如下控件:button 按钮对象checkbox 复选框或检查列表 --配合onclick单击事件,通常用于全选效果radio 单选按纽reset 重置按钮submit提交按钮 2.内容改变

  • C++事件驱动型银行排队模拟

    最近重拾之前半途而废的C++,恰好看到了<C++ 实现银行排队服务模拟>,但是没有实验楼的会员,看不到具体的实现,正好用来作为练习. 模拟的是银行的排队叫号系统,所有顾客以先来后到的顺序在同一个队列中等待,当有服务窗口空闲时,则队首的顾客接受服务,完成后则下一位顾客开始接受服务. 本实现是事件驱动型的,处理对象是事件而不是顾客:  有2种事件:顾客到事件和顾客离开事件.  有2个队列:顾客队列和事件队列. 程序的逻辑如下:  1.初始化事件队列,填充顾客到达事件:  2.处理事件队列的头部(总

  • silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)

    案例背景: 整个功能其实就是从数据库取出数据,然后在界面上播放,简单地说就是类似网上在线看视频,听音乐,只不过我取的是字符串数据,而他们取的是流文件数据.把整体数据分成十份,十个线程同时向数据库取数据(并发提高速度)放在十个队列中,另外一个线程从队列中取数据拿出来到界面上播放,可以拖动播放进度,停止,暂停,重新播放,控制播放速度.恩,功能听起来似乎很简单,做起来也不是很难.但是后面发现的一些问题,以及顺着这些问题往下挖掘,挖掘了一些我认为值得记住的东西. 关键东西: 1. siliverligh

  • wxPython事件驱动实例详解

    本文实例讲述了wxPython的事件驱动机制,分享给大家供大家参考.具体方法如下: 先来看看如下代码: #!/usr/bin/python # moveevent.py import wx #导入wx库 class MoveEvent(wx.Frame): def __init__(self, parent, id, title): wx.Frame.__init__(self, parent, id, title, size=(250, 180)) #窗口大小为(250, 180) wx.St

  • window.addeventjs事件驱动函数集合addEvent等

    // written by Dean Edwards, 2005 // with input from Tino Zijdel, Matthias Miller, Diego Perini // http://dean.edwards.name/weblog/2005/10/add-event/ function addEvent(element, type, handler) {   if (element.addEventListener) {     element.addEventLis

  • JScript面向事件驱动的编程

    世间万物,千变万化,面向对象的编程亦是对现实社会的模拟,而JavaScript是一种基于对象并且很接近面向对象编程的编程语言,而我们web设计师/程序员跟JavaScript打交道亦要直面JavaScript才能够把网页写得更加丰富多彩.在此先搞清楚一点就是:JavaScript并不仅仅用在Web上,它可以用在许多领域,当然我这里讨论的更多的是JavaScript在Web上的应用,并且主要是事件方面的应用. JavaScript并不能直接对Web对象进行操作,而是要通过浏览器提供的Documen

  • 驱动事件的addEvent.js代码

    复制代码 代码如下: Array.prototype.inArray = function (value) {      var i;      for (i=0; i < this.length; i++) {          if (this[i] === value) {              return true;          }      }      return false;  }; function addEvent( obj, type, fn ) {      

  • 你必须知道的Javascript知识点之"单线程事件驱动"的使用

    复制代码 代码如下: var intervalBody = function(){     console.log('interval'); } var startInterval = function(){     setInterval(intervalBody,1000); } var timeoutBody = function(){     console.log('timeout'); } var startTimeout = function(){     setTimeout(t

  • Node.js中的事件驱动编程详解

    在传统程编程模里,I/O操作就像一个普通的本地函数调用:在函数执行完之前程序被堵塞,无法继续运行.堵塞I/O起源于早先的时间片模型,这种模型下每个进程就像一个独立的人,目的是将每个人区分开,而且每个人在同一时刻通常只能做一件事,必须等待前面的事做完才能决定下一件事做什么.但是这种在计算机网络和Internet上被广泛使用的"一个用户,一个进程"的模型伸缩性很差.管理多个进程时,会耗费很多内存,上下文切换也会占用大量资源,这些对操作系统是个很大的负担,而且随着进程数的递增,会导致系统性能

  • Nginx学习笔记之事件驱动框架处理流程

    ngx_event_core_module模块的ngx_event_process_init方法对事件模块做了一些初始化.其中包括将"请求连接"这样一个读事件对应的处理方法(handler)设置为ngx_event_accept函数,并将此事件添加到epoll模块中.当有新连接事件发生时,ngx_event_accept就会被调用.大致流程是这样: worker进程在ngx_worker_process_cycle方法中不断循环调用ngx_process_events_and_time

随机推荐