盤點(diǎn)JavaScript中的事件的三種模型及復(fù)雜的界面動(dòng)態(tài)交互效果
大家好,我是皮皮。
前言
我們知道在很多編程語言都有事件這個(gè)概念,在JavaScript中同樣存在事件,原因也很簡單,我們知道HTML是頁面結(jié)構(gòu)層,相當(dāng)于人的骨架;
CSS是樣式層,相當(dāng)于人的外形;但是它是靜態(tài)的,一個(gè)人應(yīng)該能動(dòng),動(dòng)起來,所以產(chǎn)生了JavaScript;JavaScript就是用來控制頁面元素,與用戶產(chǎn)
生動(dòng)態(tài)交互效果,才構(gòu)成了如今這豐富多樣化的界面。今天我們就來認(rèn)識一下js當(dāng)中的事件;
一、事件相關(guān)概念
事件:指用戶的鼠標(biāo)動(dòng)作和鍵盤動(dòng)作,document的load和unloaded,事件被封裝成一個(gè)event對象,包含了該事件發(fā)生時(shí)的所有相關(guān)信息(event的屬性)以及可以對事件進(jìn)行的操作(event的方法)。
比如點(diǎn)擊頁面上一個(gè)按鈕,產(chǎn)生的event對象如下:
以上可以看到是一個(gè)MouseEvent對象,包含了一系列屬性,如鼠標(biāo)點(diǎn)擊的位置等。
敲擊鍵盤時(shí)產(chǎn)生的event對象
window.onload監(jiān)聽函數(shù)中打印出event對象如下:
注意:Event 類是MouseEvent、KeyboardEvent的父類;
二、事件對象常用屬性和方法
2.1事件定位相關(guān)屬性
MouseEvent對象里的屬性,很多帶X/Y,它們都和事件的位置相關(guān)。具體包括:x/y、clientX/clientY、pageX/pageY、screenX/screenY、layerX/layerY、offsetX/offsetY 六對;之所以能有這么多是因?yàn)楦鳛g覽器廠商在版本更迭的時(shí)候產(chǎn)生了很多不一致:
以移動(dòng)鼠標(biāo)為例:
x屬性Y屬性功能xY距瀏覽器可視區(qū)域(工具欄除外區(qū)域)左/上的距離;clientXclientY距瀏覽器可視區(qū)域(工具欄除外區(qū)域)左/上的距離(同上);screenXscreenY距計(jì)算機(jī)顯示器左/上的距離,拖動(dòng)你的瀏覽器窗口位置可以看到變化;offsetXoffsetY距有定位屬性的父元素左/上的距離;(不計(jì)算邊框)pageXpageY距頁面左/上的距離,它與clientX/clientY的區(qū)別是不隨滾動(dòng)條的位置變化;layerXlayerY距有定位屬性的父元素左/上的距離(計(jì)算邊框);
之所以有那么多值一樣的情況,就是由于瀏覽器兼容的原因, 針對于瀏覽器對于不同屬性的兼容情況如下所示;(+支持,-不支持)
瀏覽器offsetX/offsetYx/ylayerX/layerYpageX/pageYclientX/clientYscreenX/screenYW3C----++I(xiàn)E++--++Firefox--++++Opera++-+++Safari++++++chrome++
+++
2.2其他常用屬性
target:發(fā)生事件的節(jié)點(diǎn);
currentTarget:當(dāng)前正在處理的事件的節(jié)點(diǎn),在事件捕獲或冒泡階段;
timeStamp:事件發(fā)生的時(shí)間,時(shí)間戳。
bubbles:事件是否冒泡。
cancelable:事件是否可以用preventDefault()方法來取消默認(rèn)的動(dòng)作;
keyCode:按下的鍵的值;
2.3 event對象的方法
event. preventDefault(): 阻止元素默認(rèn)的行為,如鏈接的跳轉(zhuǎn)、表單的提交;
event. stopPropagation(): 阻止事件冒泡;
event.initEvent(): 初始化新事件對象的屬性,自定義事件會(huì)用,不常用;
event. stopImmediatePropagation(): 可以阻止掉同一事件的其他優(yōu)先級較低的偵聽器的處理很少使用;
三、事件的三種模型
3.1 原始事件模型(DOM0級)
在原始事件模型中,事件發(fā)生后沒有傳播的概念,沒有事件流。事件發(fā)生,馬上處理。監(jiān)聽函數(shù)只是元素的一個(gè)屬性值,通過指定元素的屬性值來綁定監(jiān)聽器。書寫方式有兩種:
HTML代碼中指定屬性值:
<input type="button" onclick="func1()" />
在js代碼中指定屬性值:
document.getElementsByTagName(‘input’)[0].onclick = func1
優(yōu)點(diǎn):所有瀏覽器都兼容
缺點(diǎn):
邏輯與顯示沒有分離;
相同事件的監(jiān)聽函數(shù)只能綁定一個(gè),后綁定的會(huì)覆蓋掉前面的,如:a.onclick = func1; a.onclick = func2;將只會(huì)執(zhí)行func2中的內(nèi)容;
無法通過事件的冒泡、委托等機(jī)制完成更多事情;
3.2 IE事件模型
“IE不把該對象傳入事件處理函數(shù),由于在任意時(shí)刻只會(huì)存在一個(gè)事件,所以IE把它作為全局對象window的一個(gè)屬性”,用IE8執(zhí)行了代碼alert(window.event),結(jié)果彈出是null,說明該屬性已經(jīng)定義,只是值為null(與undefined不同),代碼如下;
window.onload = function (){alert(window.event);}
setTimeout(function(){alert(window.event);},2000);
第一次彈出【object event】,兩秒后彈出依然是null。由此可見IE是將event對象在處理函數(shù)中設(shè)為window的屬性,一旦函數(shù)執(zhí)行結(jié)束,便被置為null了;
IE的事件模型只有兩步:
先執(zhí)行元素的監(jiān)聽函數(shù),
然后事件沿著父節(jié)點(diǎn)一直冒泡到document。
IE模型下的事件監(jiān)聽方式比較獨(dú)特,綁定監(jiān)聽函數(shù)的方法是:
attachEvent( "eventType","handler");//其中evetType為事件的類型,
如onclick,注意要加’on’。解除事件監(jiān)聽器的方法是:
detachEvent("eventType","handler" )
IE的事件模型已經(jīng)可以解決原始模型的三個(gè)缺點(diǎn),但其自己的缺點(diǎn)就是兼容性,只有IE系列瀏覽器才可以這樣寫。
3.2 DOM2事件模型
此模型是W3C制定的標(biāo)準(zhǔn)模型,既然是標(biāo)準(zhǔn),現(xiàn)代瀏覽器(指IE6~8除外的瀏覽器)都已經(jīng)遵循這個(gè)規(guī)范。W3C制定的事件模型中,一次事件的發(fā)生包含三個(gè)過程:
capturing phase:事件捕獲階段。事件被從document一直向下傳播到目標(biāo)元素,在這過程中依次檢查經(jīng)過的節(jié)點(diǎn)是否注冊了該事件的監(jiān)聽函數(shù),若有則執(zhí)行;
target phase:事件處理階段。事件到達(dá)目標(biāo)元素,執(zhí)行目標(biāo)元素的事件處理函數(shù);
bubbling phase:事件冒泡階段。事件從目標(biāo)元素上升一直到達(dá)document,同樣依次檢查經(jīng)過的節(jié)點(diǎn)是否注冊了該事件的監(jiān)聽函數(shù),有則執(zhí)行;
所有的事件類型都會(huì)經(jīng)歷captruing phase但是只有部分事件會(huì)經(jīng)歷bubbling phase階段,例如submit事件就不會(huì)被冒泡。
標(biāo)準(zhǔn)的事件監(jiān)聽器綁定:
addEventListener("eventType","handler","true|false");
其中eventType指事件類型。第二個(gè)參數(shù)是處理函數(shù),第三個(gè)即用來指定是否在捕獲階段進(jìn)行處理,一般設(shè)為false來與IE保持一致。
監(jiān)聽器的解除也類似:
removeEventListner("eventType","handler","true!false");
以上便是事件的三種模型,我們在開發(fā)的時(shí)候需要兼顧IE與非IE瀏覽器,所以注冊一個(gè)監(jiān)聽器應(yīng)該這樣寫:
四、總結(jié)
本文我們就JavaScript事件做了基本介紹,認(rèn)識了事件的相關(guān)概念,事件的常用屬性和方法,以及事件的三種模型,想要完成復(fù)雜的界面動(dòng)態(tài)交互效果,事件的使用至關(guān)重要,想要深入了解事件的小伙伴可以參考官方手冊。
請輸入評論內(nèi)容...
請輸入評論/評論長度6~500個(gè)字
最新活動(dòng)更多
-
即日-10.29立即報(bào)名>> 2024德州儀器嵌入式技術(shù)創(chuàng)新發(fā)展研討會(huì)
-
10月31日立即下載>> 【限時(shí)免費(fèi)下載】TE暖通空調(diào)系統(tǒng)高效可靠的組件解決方案
-
即日-11.13立即報(bào)名>>> 【在線會(huì)議】多物理場仿真助跑新能源汽車
-
11月14日立即報(bào)名>> 2024工程師系列—工業(yè)電子技術(shù)在線會(huì)議
-
12月19日立即報(bào)名>> 【線下會(huì)議】OFweek 2024(第九屆)物聯(lián)網(wǎng)產(chǎn)業(yè)大會(huì)
-
即日-12.26火熱報(bào)名中>> OFweek2024中國智造CIO在線峰會(huì)
推薦專題
-
10 百度搜索,正在被平替
- 1 Intel宣布40年來最重大轉(zhuǎn)型:年底前裁員15000人、拋掉2/3房產(chǎn)
- 2 因美封殺TikTok,字節(jié)股價(jià)骨折!估值僅Meta1/5
- 3 宏山激光重磅發(fā)布行業(yè)解決方案,助力智能制造產(chǎn)業(yè)新飛躍
- 4 國產(chǎn)AI芯片公司破產(chǎn)!白菜價(jià)拍賣
- 5 具身智能火了,但規(guī)模落地還需時(shí)間
- 6 三次錯(cuò)失風(fēng)口!OpenAI前員工殺回AI編程賽道,老東家捧金相助
- 7 國產(chǎn)英偉達(dá)們,抓緊沖刺A股
- 8 英特爾賦能智慧醫(yī)療,共創(chuàng)數(shù)字化未來
- 9 英偉達(dá)的麻煩在后頭?
- 10 將“網(wǎng)紅”變成“商品”,AI“爆改”實(shí)力拉滿
- 高級軟件工程師 廣東省/深圳市
- 自動(dòng)化高級工程師 廣東省/深圳市
- 光器件研發(fā)工程師 福建省/福州市
- 銷售總監(jiān)(光器件) 北京市/海淀區(qū)
- 激光器高級銷售經(jīng)理 上海市/虹口區(qū)
- 光器件物理工程師 北京市/海淀區(qū)
- 激光研發(fā)工程師 北京市/昌平區(qū)
- 技術(shù)專家 廣東省/江門市
- 封裝工程師 北京市/海淀區(qū)
- 結(jié)構(gòu)工程師 廣東省/深圳市