搜尋
首頁web前端js教程JScript面向事件驱动的编程_javascript技巧

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

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

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


[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 = 函数,请见实例代码:

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

或者:

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

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

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

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

[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>
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Python vs. JavaScript:開發環境和工具Python vs. JavaScript:開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具