Javascript基礎(chǔ)知識(shí)（二）事件
Event對(duì)象：(event對(duì)象是window對(duì)象的屬性，當(dāng)事件發(fā)生時(shí)，同時(shí)產(chǎn)生event對(duì)象，事件結(jié)束，event對(duì)象消失)
IE中:window.event;//獲取對(duì)象
DOM中：argument[0];//獲取對(duì)象
IE中Event對(duì)象常用的屬性方法：
1.clientX:事件發(fā)生時(shí)，鼠標(biāo)指針在客戶區(qū)(不包括工具欄，滾動(dòng)條等)的X坐標(biāo)；
2.clientY：事件發(fā)生時(shí)，鼠標(biāo)指針在客戶區(qū)(不包括工具欄，滾動(dòng)條等)的Y坐標(biāo)；
3.keyCode：對(duì)于keyCode事件，指示按下的鍵的Unicode字符，對(duì)于keydown/keyup事件，指示按下的鍵盤是數(shù)字表示器(獲得按鍵的數(shù)值)；
4.offsetX：鼠標(biāo)指針相對(duì)于引發(fā)事件的對(duì)象的X坐標(biāo)；
5.offsetY：鼠標(biāo)指針相對(duì)于引發(fā)事件的對(duì)象的Y坐標(biāo)；
6.srcElement：導(dǎo)致事件發(fā)生的元素；
DOM中event對(duì)象常用的屬性方法:
1.clientX；
2.clientY；
3.pageX；鼠標(biāo)指針相對(duì)于頁(yè)面的X坐標(biāo)；
4.pageY；鼠標(biāo)指針相對(duì)于頁(yè)面的Y坐標(biāo)；
5.StopPropagation:調(diào)用該方法可以阻止事件的進(jìn)一步傳播(冒泡)；
6.target：觸發(fā)的事件元素/對(duì)象；
7.type：事件的名稱；
兩種event對(duì)象的相同點(diǎn)和不同點(diǎn)：
相同點(diǎn)：
1.獲取事件類型；
2.獲取鍵盤代碼(keydown/keyup事件)；
3.檢測(cè)Shift，Alt，Ctrl；
4.獲取客戶區(qū)坐標(biāo)；
5.獲取屏幕坐標(biāo)；
不同點(diǎn)：
1.獲取目標(biāo)；
//IE：var oTarget=oEvent.srcElement;
//DOM: var oTarget=oEvent.target;
2.獲取字符碼；
//IE: var iCharCode=oEvent.keyCode;
//DOM: var iCharCode=oEvent.charCode;
3.阻止事件的默認(rèn)行為；
//IE: oEvent.returnValue=false;
//DOM: oEvent.preventDefault;
4.終止冒泡：
//IE:oEvent.cancelBubble=true;
//DOM:oEvent.stopPropagation
事件類型：
一.鼠標(biāo)事件：
onmouseover:當(dāng)鼠標(biāo)移入時(shí)；
onmouseout:當(dāng)鼠標(biāo)移出時(shí)；
onmousedown:當(dāng)按下鼠標(biāo)時(shí)；
onmouseup:當(dāng)抬起鼠標(biāo)時(shí);
onclick:點(diǎn)擊鼠標(biāo)左鍵時(shí)；
ondblclick：雙擊鼠標(biāo)左鍵時(shí)；
二.鍵盤事件：
onkeydown：當(dāng)用戶在鍵盤上按下一個(gè)鍵時(shí)發(fā)生；
onkeyup:當(dāng)用戶釋放一個(gè)按下的鍵時(shí)發(fā)生；
keypress:當(dāng)用戶一直按著鍵不放時(shí)；
三.HTML事件：
onload：加載頁(yè)面時(shí)；
onunload：卸載頁(yè)面時(shí)；
abort：當(dāng)用戶終止裝載進(jìn)程之前，如果他還沒(méi)有被完全轉(zhuǎn)載，發(fā)生abort事件
error：javascript發(fā)生錯(cuò)誤時(shí)，產(chǎn)生的事件；
select：在一個(gè)input或者textarea中，用戶選擇字符時(shí)，觸發(fā)的select事件
change：在一個(gè)input或者textarea中，當(dāng)它失去焦點(diǎn)，在select中觸發(fā)change事件
submit：當(dāng)表單被提交時(shí)，觸發(fā)submit事件；
reset:重置
resize：當(dāng)窗口或框架尺寸調(diào)整時(shí)觸發(fā)的事件；
scroll：當(dāng)用戶滾動(dòng)或有滾動(dòng)條時(shí)觸發(fā)的事件；
focus：失去焦點(diǎn)時(shí)；
blur：獲得焦點(diǎn)時(shí)；
Javascript的事件模型
1.Javascript事件模型：1.冒泡類型: <input type="button">當(dāng)用戶點(diǎn)擊按鈕時(shí)：input-body-html-document-window（從下往上冒泡）IE瀏覽器只是用冒泡
2.捕獲類型: <input type="button">當(dāng)用戶點(diǎn)擊按鈕時(shí)：window-document-html-body-input （從上往下）
經(jīng)過(guò)ECMA標(biāo)準(zhǔn)化后，其他瀏覽器都支持兩種類型，捕獲先發(fā)生。
2.傳統(tǒng)事件書(shū)寫(xiě)的三種方式：
1.<input type="button" onclick="alert('helloworld!')">
2.<input type="button onclick=name1()">======<script>function name1(){alert('helloword!');}</script> //有名函數(shù)
3.<input type="button" id="input1"> //匿名函數(shù)
<script>
Var button1=document.getElementById("input1");
button1.onclick=funtion(){
alert('helloword!')
}
</script>
3.現(xiàn)代事件書(shū)寫(xiě)方式：
<input type="button" id="input1"> //IE中添加事件
<script>
var fnclick(){
alert("我被點(diǎn)擊了")
}
var Oinput=document.getElementById("input1");
Oinput.attachEvent("onclick",fnclick);
--------------------------------------
Oinput.detachEvent("onclick",fnclick);//IE中刪除事件
</script>
<input type="button" id="input1"> //DOM中添加事件
<script>
var fnclick(){
alert("我被點(diǎn)擊了")
}
var Oinput=document.getElementById("input1");
Oinput.addEventListener("onclick",fnclick,true);
--------------------------------------
Oinput.removeEventListener("onclick",fnclick);//DOM中刪除事件
</script>
<input type="button" id="input1"> //兼容IE和DOM添加事件
<script>
var fnclick1=function(){alert("我被點(diǎn)擊了")}
var fnclick2=function(){alert("我被點(diǎn)擊了")}
var Oinput=document.getElementById("input1");
if(document.attachEvent){
Oinput.attachEvent("onclick",fnclick1)
Oinput.attachEvent("onclick",fnclick2)
}
else(document.addEventListener){
Oinput.addEventListener("click",fnclick1,true)
Oinput.addEventListener("click",fnclick2,true)
}
</script>
- C語(yǔ)言基礎(chǔ)知識(shí)點(diǎn)解析(extern,static,typedef,const)
- c++運(yùn)算符重載基礎(chǔ)知識(shí)詳解
- C++函數(shù)模板與類模板實(shí)例解析
- C++命名空間實(shí)例解析
- C++普通函數(shù)指針與成員函數(shù)指針實(shí)例解析
- Javascript基礎(chǔ)知識(shí)（一）核心基礎(chǔ)語(yǔ)法與事件模型
- Javascript基礎(chǔ)知識(shí)（三）BOM，DOM總結(jié)
- javascript學(xué)習(xí)筆記（一）基礎(chǔ)知識(shí)
- C++基礎(chǔ)入門教程（一）：基礎(chǔ)知識(shí)大雜燴
- JavaScript基礎(chǔ)知識(shí)學(xué)習(xí)筆記
- C++基礎(chǔ)知識(shí)實(shí)例解析（一）
相關(guān)文章
簡(jiǎn)介JavaScript中substring()方法的使用
這篇文章主要介紹了簡(jiǎn)介JavaScript中substring()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
在UglifyJS入門中主要記錄了UglifyJS的安裝，配置。篇末在命令行中使用了一個(gè)簡(jiǎn)單命令來(lái)壓縮一個(gè)JS文件。這篇以編程的方式去壓縮JS文件。即寫(xiě)一個(gè)build.js文件，使用node命令執(zhí)行該文件2012-03-03
本篇內(nèi)容是小編整理的關(guān)于腳本之家精選的JS正則的優(yōu)秀文章，適合大家學(xué)習(xí)JS正則的相關(guān)內(nèi)容，有需要的朋友參考下。2018-05-05
JavaScript數(shù)據(jù)類型轉(zhuǎn)換
本文詳細(xì)講解了JavaScript實(shí)現(xiàn)數(shù)據(jù)類型轉(zhuǎn)換的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
JavaScript編程中window的location與history對(duì)象詳解
這篇文章主要介紹了JavaScript編程中window的location與history對(duì)象,是JavaScript入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-10-10
Javascript核心讀書(shū)有感之語(yǔ)言核心
本節(jié)是javascript語(yǔ)言的一個(gè)快速預(yù)覽，也是本書(shū)的第一部分快速預(yù)覽。有想閱讀此書(shū)的小伙伴，建議先讀下本系列文章。2015-02-02
本文是對(duì)javascript中的內(nèi)存管理進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
JavaScript中Boolean對(duì)象的屬性解析
這篇文章主要介紹了JavaScript中布爾對(duì)象的屬性解析,包括對(duì)constructor屬性和prototype構(gòu)造器的簡(jiǎn)單介紹,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了js array數(shù)組對(duì)象操作方法匯總，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
深入document.write()與HTML4.01的非成對(duì)標(biāo)簽的詳解
本篇文章對(duì)document.write()與HTML4.01的非成對(duì)標(biāo)簽進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05