JavaScript事件用法淺析
本文實(shí)例講述了JavaScript事件用法。分享給大家供大家參考,具體如下:
JavaScript通過(guò)事件與HTML交互。
事件流
事件流規(guī)定了事件的觸發(fā)規(guī)則和順序。DOM2規(guī)定了事件流包括三個(gè)階段:事件捕獲 -> 目標(biāo)觸發(fā)除 -> 事件冒泡。DOM2規(guī)定在事件捕獲階段不應(yīng)調(diào)用事件處理程序,不過(guò)各大瀏覽器都不鳥它。DOM2級(jí)的事件處理程序操作函數(shù)對(duì):addEventListener和removeEventListener的第三個(gè)參數(shù)則把這種事變成了DIY,這是一種妥協(xié),同時(shí)讓初學(xué)者認(rèn)為dom的管理一片混亂。
var btn = document.getElementById("btn"); btn.addEventListener("click",function(){alert(this.id);},false); document.body.addEventListener("click",function(){alert("body");},false);
更新上述js中addEventListener和removeEventListener中的第三個(gè)參數(shù)為true,對(duì)比為false時(shí)的效果,便大約能理解事件流了。
事件
事件是用戶或?yàn)g覽器自身執(zhí)行的某和動(dòng)作。
事件處理程序的添加方式
響應(yīng)事件的函數(shù)稱為事件處理程序。
指定事件處理程序有以下方式:
HTML特性指定。
如果某個(gè)元素支持某個(gè)事件,那么就有一個(gè)對(duì)應(yīng)的HTML特性,用此特性就可以給其添加事件處理程序 。
<button id="btn" onclick="alert('button click')">button</button>
DOM0級(jí)。 將一個(gè)函數(shù)賦值給一個(gè)元素的事件處理程序?qū)傩裕哼@是使用js指定事件生理程序的傳統(tǒng)方式,至今仍被使用。
var btn = document.getElementById("btn"); btn.onmouseover = function(){ this.innerHTML="按鈕"; };
DOM2級(jí)。
通過(guò)addEventListener和removeEventListener來(lái)管理元素的事件。所有DOM節(jié)點(diǎn)都包含這兩個(gè)方法,它們都包含三個(gè)參數(shù),以add為例:
addEventListener(事件名,事件處理函數(shù),是否在事件捕獲時(shí)執(zhí)行事件處理程序)
var btn = document.getElementById("btn"); btn.addEventListener("click",function(){alert(this.id);},true); //注意下面的remove,它完全沒(méi)有用,這兩個(gè)匿名函數(shù)實(shí)際上是不同的對(duì)象 btn.removeEventListener("click",function(){alert(this.id);},true);
在上面代碼中,指向同一對(duì)象的引用被認(rèn)為是相同的,同樣的申明生成的是兩個(gè)外表相同但是存儲(chǔ)在堆上兩個(gè)不同位置的不同對(duì)象。
事件對(duì)象
DOM上的事件被觸發(fā)時(shí),會(huì)生成一個(gè)事件對(duì)象event。無(wú)論指定了什么事件處理程序都會(huì)傳入event對(duì)象:準(zhǔn)確的地說(shuō),event對(duì)象是在調(diào)用執(zhí)行函數(shù)的執(zhí)行環(huán)境中創(chuàng)建的,根據(jù)作用域鏈的定義,可知它是如何傳入的。
var btn = document.getElementById("btn"); var btnClick = function(){ alert(event.type); } btn.onclick = btnClick;//點(diǎn)擊btn按鈕時(shí),彈出msg:click
event包含豐富的成員,用來(lái)控制訪問(wèn)事件,下面是所有事件的共有成員。
target:觸發(fā)事件的動(dòng)作直接作用的目標(biāo)元素。
currentTarget:等于this,事件處理程序作用于的元素。
eventPhase:調(diào)用事件處理程序時(shí),所處的事件流中的階段。1,2,3 三個(gè)值分別對(duì)應(yīng)事件流三階段。
type:事件類型。單擊事件對(duì)應(yīng) String: "click"。
事件類型
事件類型分為以下幾類:
UI事件。
焦點(diǎn)事件。
鼠標(biāo)與滾輪事件。
鍵盤與文本事件。
復(fù)合事件。
變動(dòng)事件。
HTML5事件。
設(shè)備事件。
觸摸與手勢(shì)事件。
PS:關(guān)于javascript事件的詳細(xì)說(shuō)明可參考本站在線工具:
javascript事件與功能說(shuō)明大全:
http://tools.jb51.net/table/javascript_event
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript窗口操作與技巧匯總》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JS鼠標(biāo)事件大全 推薦收藏
- js之事件冒泡和事件捕獲詳細(xì)介紹
- js模擬點(diǎn)擊事件實(shí)現(xiàn)代碼
- js實(shí)現(xiàn)touch移動(dòng)觸屏滑動(dòng)事件
- js 鼠標(biāo)點(diǎn)擊事件及其它捕獲
- js事件(Event)知識(shí)整理
- js中獲取事件對(duì)象的方法小結(jié)
- 文本框中,回車鍵觸發(fā)事件的js代碼[多瀏覽器兼容]
- JS判斷文本框內(nèi)容改變事件的簡(jiǎn)單實(shí)例
- js事件監(jiān)聽機(jī)制(事件捕獲)總結(jié)
- javascript 鼠標(biāo)事件總結(jié)
- JS中動(dòng)態(tài)添加事件(綁定事件)的代碼
相關(guān)文章
JS數(shù)組array元素的添加和刪除方法代碼實(shí)例
這篇文章主要介紹了JS數(shù)組array元素的添加和刪除方法代碼實(shí)例,本文直接給出操作代碼實(shí)例,需要的朋友可以參考下2015-06-06JavaScript將相對(duì)地址轉(zhuǎn)換為絕對(duì)地址示例代碼
本文為大家詳細(xì)介紹下JavaScript怎么將相對(duì)地址轉(zhuǎn)換為絕對(duì)地址,具體的示例如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-07-07js實(shí)現(xiàn)時(shí)間日期的相加相減代碼示例
這篇文章主要給大家介紹了關(guān)于利用js實(shí)現(xiàn)時(shí)間日期的相加相減的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考解決價(jià)值,需要的朋友可以參考下2023-09-09JS常見簡(jiǎn)單正則表達(dá)式驗(yàn)證功能小結(jié)【手機(jī),地址,企業(yè)稅號(hào),金額,身份證等】
這篇文章主要介紹了JS常見簡(jiǎn)單正則表達(dá)式驗(yàn)證功能,結(jié)合實(shí)例形式總結(jié)分析了JS針對(duì)手機(jī),地址,企業(yè)稅號(hào),金額,身份證等的常見驗(yàn)證技巧,需要的朋友可以參考下2017-01-01js實(shí)現(xiàn)可鍵盤控制的簡(jiǎn)單抽獎(jiǎng)程序
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)可鍵盤控制的簡(jiǎn)單抽獎(jiǎng)程序,代碼簡(jiǎn)潔,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07js實(shí)現(xiàn)input密碼框提示信息的方法(附html5實(shí)現(xiàn)方法)
這篇文章主要介紹了js實(shí)現(xiàn)input密碼框提示信息的方法,涉及JavaScript頁(yè)面元素的獲取,屬性判斷及樣式設(shè)置等技巧,并附帶html5的相關(guān)實(shí)現(xiàn)方法,需要的朋友可以參考下2016-01-01HTML5開發(fā)Kinect體感游戲的實(shí)例應(yīng)用
這篇文章主要介紹了HTML5開發(fā)Kinect體感游戲的實(shí)例應(yīng)用的相關(guān)資料,希望通過(guò)本文能夠幫助到大家,需要的朋友可以參考下2017-09-09JavaScript位移運(yùn)算符(無(wú)符號(hào)) >>> 三個(gè)大于號(hào) 的使用方法詳解
這篇文章主要介紹了JavaScript位移運(yùn)算符(無(wú)符號(hào)) >>> 三個(gè)大于號(hào) 的使用方法詳解的相關(guān)資料,需要的朋友可以參考下2016-03-03