国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 語言 > JavaScript > 正文

Javascript基礎知識(二)事件

2024-05-06 16:09:18
字體:
來源:轉載
供稿:網友
本文是javascript系列文章的第二篇,主要介紹javascript事件,都是本人的一些心得,希望對大家有所幫助
 
 

Event對象:(event對象是window對象的屬性,當事件發生時,同時產生event對象,事件結束,event對象消失)

IE中:window.event;//獲取對象

DOM中:argument[0];//獲取對象

IE中Event對象常用的屬性方法:

1.clientX:事件發生時,鼠標指針在客戶區(不包括工具欄,滾動條等)的X坐標;

2.clientY:事件發生時,鼠標指針在客戶區(不包括工具欄,滾動條等)的Y坐標;

3.keyCode:對于keyCode事件,指示按下的鍵的Unicode字符,對于keydown/keyup事件,指示按下的鍵盤是數字表示器(獲得按鍵的數值);

4.offsetX:鼠標指針相對于引發事件的對象的X坐標;

5.offsetY:鼠標指針相對于引發事件的對象的Y坐標;

6.srcElement:導致事件發生的元素;

DOM中event對象常用的屬性方法:

1.clientX;

2.clientY;

3.pageX;鼠標指針相對于頁面的X坐標;

4.pageY;鼠標指針相對于頁面的Y坐標;

5.StopPropagation:調用該方法可以阻止事件的進一步傳播(冒泡);

6.target:觸發的事件元素/對象;

7.type:事件的名稱;

兩種event對象的相同點和不同點

相同點:

1.獲取事件類型;

2.獲取鍵盤代碼(keydown/keyup事件);

3.檢測Shift,Alt,Ctrl;

4.獲取客戶區坐標;

5.獲取屏幕坐標;

不同點:

1.獲取目標;

//IE:var oTarget=oEvent.srcElement;

//DOM: var oTarget=oEvent.target;

2.獲取字符碼;

//IE: var iCharCode=oEvent.keyCode;

//DOM: var iCharCode=oEvent.charCode;

3.阻止事件的默認行為;

//IE: oEvent.returnValue=false;

//DOM: oEvent.preventDefault;

4.終止冒泡:

//IE:oEvent.cancelBubble=true;

//DOM:oEvent.stopPropagation

事件類型:

一.鼠標事件:

onmouseover:當鼠標移入時;

onmouseout:當鼠標移出時;

onmousedown:當按下鼠標時;

onmouseup:當抬起鼠標時;

onclick:點擊鼠標左鍵時;

ondblclick:雙擊鼠標左鍵時;

二.鍵盤事件:

onkeydown:當用戶在鍵盤上按下一個鍵時發生;

onkeyup:當用戶釋放一個按下的鍵時發生;

keypress:當用戶一直按著鍵不放時;

三.HTML事件:

onload:加載頁面時;

onunload:卸載頁面時;

abort:當用戶終止裝載進程之前,如果他還沒有被完全轉載,發生abort事件

error:javascript發生錯誤時,產生的事件;

select:在一個input或者textarea中,用戶選擇字符時,觸發的select事件

change:在一個input或者textarea中,當它失去焦點,在select中觸發change事件

submit:當表單被提交時,觸發submit事件;

reset:重置

resize:當窗口或框架尺寸調整時觸發的事件;

scroll:當用戶滾動或有滾動條時觸發的事件;

focus:失去焦點時;

blur:獲得焦點時;

Javascript的事件模型

1.Javascript事件模型:1.冒泡類型: <input type="button">當用戶點擊按鈕時:input-body-html-document-window(從下往上冒泡)IE瀏覽器只是用冒泡

    2.捕獲類型: <input type="button">當用戶點擊按鈕時:window-document-html-body-input (從上往下)

經過ECMA標準化后,其他瀏覽器都支持兩種類型,捕獲先發生。

2.傳統事件書寫的三種方式:

1.<input type="button" onclick="alert('helloworld!')">

2.<input type="button onclick=name1()">======<script>function name1(){alert('helloword!');}</script> //有名函數

3.<input type="button" id="input1">  //匿名函數

復制代碼代碼如下:

<script>
 Var button1=document.getElementById("input1");
 button1.onclick=funtion(){
 alert('helloword!')
 }
</script>

 

3.現代事件書寫方式:

復制代碼代碼如下:

<input type="button" id="input1">  //IE中添加事件

 

<script>
 var fnclick(){
 alert("我被點擊了")
 }
 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("我被點擊了")
 }
 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("我被點擊了")}
 var fnclick2=function(){alert("我被點擊了")}
 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>


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表

圖片精選

主站蜘蛛池模板: 颍上县| 蓝山县| 怀柔区| 江川县| 葵青区| 南召县| 呼图壁县| 霍林郭勒市| 呼伦贝尔市| 徐汇区| 昌宁县| 文山县| 宜兰市| 吴川市| 德惠市| 宁安市| 英山县| 大埔县| 香河县| 泾川县| 夏邑县| 雷波县| 呼和浩特市| 西丰县| 江陵县| 乐至县| 宜兴市| 社旗县| 白城市| 涿州市| 丹阳市| 卢湾区| 华坪县| 平顶山市| 宜章县| 三明市| 镇宁| 镶黄旗| 宜春市| 库车县| 阜城县|