JScript面向事件驱动的编程_javascript技巧

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

JavaScript并不能直接对Web对象进行操作,而是要通过浏览器提供的Document Object Modle(即常听说的DOM,文档模型对象)来操作对象.HTML是一个树文档,它以HTML标签为根,其它的元素都是在HTML标签之内,一级一级地延伸下去.而DOM中,则以window为根对象,其它的对象则为它的子对象或者它的子对象的子对象.

首先来认识一下什么叫事件，请看下边的代码：

<input type="button" value="这是一个按钮" onclick="window.alert(this.value);">
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

很简单的一个实例,页面只有一个按钮,它的value值为"这是一个按钮",并且我们给它指定了onclick属性,它的值为一行JavaScript代码,使用了window对象的alert方法,将this.value的内容显示在警告窗体中.这里的this是啥呢?this就是当前操作的对象,即该input对象.这份代码告诉浏览器:"当前对象受点击"的时候要调用window.alert(this.value)这行代码,因此浏览器在按钮受点击的时候就执行了相关的操作.一个对象可以有许多事件,比如说单击(click),双击(dbclick),鼠标移到上边(mouseover),鼠标移开(mouseout)等等,这些事件经常在各种流传的代码中可以看到.那如何给一个对象设置事件发生时执行的代码呢?一般来说有以下三种方式:

第一种:直接设置HTML元素的事件属性,名称一般是on+事件名称,比如说单击事件即为onclick,实例请见上边的代码

第二种:在script中对HTML对象设置事件属性,名称一般也是on+事件名称,比如说obj.onclick = 函数,请见实例代码:

<input type="button" value="这是一个按钮" id="mybut"> <script type="text/javascript" language="javascript"> var mybut = window.document.getElementById("mybut"); // 根据HTML元素的id属性获取该元素在DOM中的对象 mybut.onclick = function() { window.alert(this.value); } </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

或者：

<input type="button" value="这是一个按钮" id="mybut"> <script type="text/javascript" language="javascript"> var mybut = window.document.getElementById("mybut"); // 根据HTML元素的id属性获取该元素在DOM中的对象 function MyButton_Onclick() { alert(this.value); } mybut.onclick = MyButton_Onclick; </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

这第二种方式有两种方法来指定执行的代码,但本质上是一样的,同样是指定一个函数给对象,要求对象当某事件发生的时候执行该函数.
第三种方式: 使用obj.attachEvent(IE浏览器)/obj.addEventListener方法来指定,建议使用此方法:

<input type="button" value="这是一个按钮" id="mybut"> <script type="text/javascript" language="javascript"> var mybut = window.document.getElementById("mybut"); // 根据HTML元素的id属性获取该元素在DOM中的对象 function MyButton_Onclick(e) { var tag = window.document.all != null ? e.srcElement : e.target; // 获取事件触发来源对象,即按钮对象(分为IE和Mozilla/firefox,e是event对象. window.alert(tag.value); } if(window.document.all) // IE浏览器 mybut.attachEvent("onclick", MyButton_Onclick); else mybut.addEventListener("click", MyButton_Onclick, false); //注意这里第一个参数是click而不是onclick </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

为什么建议第三种方式呢?上边所列的第一种方式很明显只是设置一下元素属性,只可能指定一次,而第二种方式与第三种方式的差别可以从下边的实例中看出来:

<input type="button" value="这是第二种方式的示例按钮" id="mybut1"> <input type="button" value="这是第三种方式的示例按钮" id="mybut2"> <script type="text/javascript" language="javascript"> var mybut1 = window.document.getElementById("mybut1"); var mybut2 = window.document.getElementById("mybut2"); // --------------第二种方式---------------- function MyButton_Onclick1_1() { alert("指定的第一个函数"); } function MyButton_Onclick1_2() { alert("指定的第二个函数"); } mybut1.onclick = MyButton_Onclick1_1; mybut1.onclick = MyButton_Onclick1_2; //--------------第三种方式----------------- function MyButton_Onclick2_1(e) { alert("指定的第一个函数"); } function MyButton_Onclick2_2(e) { alert("指定的第二个函数"); } if(window.document.all) { mybut2.attachEvent("onclick", MyButton_Onclick2_1); mybut2.attachEvent("onclick", MyButton_Onclick2_2); } else { mybut2.addEventListener("click", MyButton_Onclick2_1, false); mybut2.addEventListener("click", MyButton_Onclick2_2, false); } </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

上边的示例使用了两个按钮，并且使用了第二种方式与第三种方式先后指定了两个函数给click事件，点击第一个按钮可以看到弹出了"指定的第二个函数"，说明只有MyButton_Onclick1_2函数生效，而先前指定的MyButton_Onclick1_1被MyButton_Onclick1_2代替了。点击第二个按钮可以看到弹出了两个窗体，显示的内容分别是"指定的第一个函数"和"指定的第二个函数"，很明显，使用attachEvent/addEventListener可以即增加要执行的程序并且还能够保留原有的程序，在IE中，它们是根据增加的顺序倒序执行，即先执行后添加的MyButton_Onclick2_2，然后再执行MyButton_Onclick2_1，而Firefox中则是相反，先执行MyButton_Onclick2_1然后再执行MyButton_Onclick2_2。。没办法，IE和Firefox是冤家，对着干。。呵呵

好了，俺还有项目要赶，只好先写到这里，最近比较忙，呵呵。下篇文章计划将利用本文的内容写一点应用，内容为：使用DHTML将span元素模拟成A元素，它亦是本文的后续文章，但不仅仅是关于事件了，还会配合CSS。

PS: 以上内容皆为本人所知，如有不当之处欢迎指正，不用给俺面子，文章内容严谨才不会误导读者嘛。。同时也呼吁有能力的网友也加入到原创计划中来。感谢此文的读者以及支持无忧脚本原创计划的网友。
再补充一个 IE 专有的事件驱动方法 Named Script
　　虽然不太建议这么写，不过做为一个介绍还是有必要的，如果在只考虑 IE 用户的情况下，此方法还是有一定的便利性的。
Named Script　通过 <script> 标签来定义对象事件。 <BR>语法： <BR><SCRIPT <BR> CLASS=classname <BR> DEFER <BR> EVENT=eventname <BR> FOR=element <BR> ID=value <BR> LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS | XML <BR> SRC=url <BR> TITLE=text <BR> TYPE=MIME-type <BR>> <br><br>　　其它属性与我们通常使用的 <script> 标签无异，就不过多介绍了，主要说的是 event 和 for 这两个属性。event 属性表示了脚本在什么事件触发执行，for 属性表示事件触发的对象，就以红亭的例子让我们来看试一下： <BR><div class="htmlarea"><TEXTAREA id="runcode19737"> <html> <head> <body> <input type="button" value="这是一个按钮" id="mybut" /> <script type="text/javascript" language="javascript" event="onclick" for="mybut">window.alert(this.value);</script>