請說明JavaScript中處理事件的步驟，說說步驟吧，謝謝

Javascript中事件處理

創(chuàng)新互聯(lián)-云計算及IDC服務(wù)提供商，涵蓋公有云、IDC機房租用、達州主機托管、等保安全、私有云建設(shè)等企業(yè)級互聯(lián)網(wǎng)基礎(chǔ)服務(wù)，歡迎來電：18980820575

事件處理分為三個階段：捕獲 - 處理 - 起泡。

以點擊按鈕為例：

捕獲階段：由外層到內(nèi)層，首先調(diào)用給Window注冊的click捕獲階段監(jiān)聽方法，然后document、body、一層層的父節(jié)點，一直到按鈕本身。

處理階段：調(diào)用按鈕本身的click監(jiān)聽方法。

起泡階段：從按鈕開始，從內(nèi)層到外層，依次調(diào)用各級父節(jié)點的起泡階段監(jiān)聽方法，直到Window。

但是，對于IE8及更低版本IE，不支持捕獲階段，因此捕獲階段的事件監(jiān)聽目前尚不通用。

通常的事件處理方法形式為：

[javascript] view plain copy

function eventHandler(e) {

e = e || window.event;

var target = e.target || e.srcElement;

... ...

}

e為事件對象，當(dāng)事件觸發(fā)時，作為參數(shù)傳進來，但對于IE8及更低版本IE不適用，只能通過全局的event變量訪問，好在不會出現(xiàn)同時處理兩個事件的情況。

如何注冊事件監(jiān)聽方法？

（1）直接寫在HTML里，DOM元素的屬性里。

[javascript] view plain copy

button id="btn" onclick="alert(123)"CLICK/button

button id="btn2" onclick="eventHandler()"CLICK2/button

（2）在Javascript中，賦值給相應(yīng)的DOM元素。

[javascript] view plain copy

document.getElementById('btn2').onclick = eventHandler;

（3）addEventListener

[javascript] view plain copy

document.getElementById('btn2').addEventListener('click', eventHandler, false);

這里第三個參數(shù)是標識何時觸發(fā)eventHandler，false表示在事件起泡階段觸發(fā)，true表示在事件捕獲階段觸發(fā)。因為在IE8即更低版本不支持事件捕獲，因此不經(jīng)常使用true。

可以給同一個控件調(diào)用多次此注冊方法，注冊多個handler。

removeEventListener與之對應(yīng)。

在IE8及更低版本IE中，使用attachMent代替。

[javascript] view plain copy

document.getElementById('btn2').attachEvent('onclick', eventHandler);

此時，瀏覽器僅支持事件起泡，不支持事件捕獲，因此無第三個參數(shù)。

detachEvent與之對應(yīng)。

阻止瀏覽器默認操作

對于通過第一種、第二種方法注冊的監(jiān)聽方法，返回值如果為false，就阻止進一步的瀏覽器默認操作。以超鏈接為例：

[javascript] view plain copy

a href="" onclick="alert(1);return false"LINK/a

點擊了這個LINK后，因為返回值為false，因此不會跳轉(zhuǎn)到百度首頁（默認操作）。

對于通過第三種方法注冊的監(jiān)聽方法，返回值無效，可以通過event.preventDefault()來阻止瀏覽器的默認操作。對于IE8即更低版本IE，不支持preventDefault方法，只能通過event.returnValue=false來實現(xiàn)。因此，阻止瀏覽器默認操作的通用寫法為：

[javascript] view plain copy

if(e.preventDefault) {

e.preventDefault();

} else {

e.returnValue = false; // IE8-

}

阻止事件起泡

[javascript] view plain copy

if(e.stopPropagation) {

e.stopPropagation();

} else {

e.cancelBubble = true;

}

javascript事件處理程序分為哪幾類?

Javascript事件處理程序的3種方式

產(chǎn)生了事件，我們就要去處理他，據(jù)馬海祥了解Javascript事件處理程序主要有3種方式：

1、HTML事件處理程序

即我們直接在HTML代碼中添加事件處理程序，如下面這段代碼：

input id="btn1" value="按鈕" type="button" onclick="showmsg();"

script

function showmsg(){

alert("HTML添加事件處理");

}

/script

從上面的代碼中我們可以看出，事件處理是直接嵌套在元素里頭的，這樣有一個毛病：就是html代碼和js的耦合性太強，如果哪一天我想要改變js中showmsg，那么我不但要再js中修改，我還需要到html中修改，一兩處的修改我們能接受，但是當(dāng)你的代碼達到萬行級別的時候，修改起來就需要勞民傷財了，所以，這個方式我們并不推薦使用。

2、DOM0級事件處理程序

即為指定對象添加事件處理，看下面的一段代碼

input id="btn2" value="按鈕" type="button"

script

var btn2= document.getElementById("btn2");

btn2.onclick=function(){

alert("DOM0級添加事件處理");

}

btn.onclick=null;//如果想要刪除btn2的點擊事件，將其置為null即可

/script

從上面的代碼中，我們能看出，相對于HTML事件處理程序，DOM0級事件，html代碼和js代碼的耦合性已經(jīng)大大降低。但是，聰明的程序員還是不太滿足，期望尋找更簡便的處理方式，下面馬海祥就來說說第三種處理方法。

3、DOM2級事件處理程序

DOM2也是對特定的對象添加事件處理程序（具體可查看馬海祥博客的《JavaScript對象屬性的基礎(chǔ)教程指南》相關(guān)介紹），但是主要涉及到兩個方法，用于處理指定和刪除事件處理程序的操作：addEventListener()和 removeEventListener()。

它們都接收三個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值（是否在捕獲階段處理事件），看下面的一段代碼：

input id="btn3" value="按鈕" type="button"

script

var btn3=document.getElementById("btn3");

btn3.addEventListener("click",showmsg,false);//這里我們把最后一個值置為false，即不在捕獲階段處理，一般來說冒泡處理在各瀏覽器中兼容性較好

function showmsg(){

alert("DOM2級添加事件處理程序");

}

btn3.removeEventListener("click",showmsg,false);//如果想要把這個事件刪除，只需要傳入同樣的參數(shù)即可

/script

javascript中正確處理錯誤的方法有幾種

1.使用window.onerror指定錯誤處理函數(shù)。

當(dāng)有錯誤的時候，onerror會被callback。 當(dāng)某個JavaScript block中有多個script錯誤時，第一個錯誤觸發(fā)后（回調(diào)callback），當(dāng)前Javascript block后面的script會被自動Drop忽略掉，不被執(zhí)行。

如：

復(fù)制代碼 代碼如下:

html

head

titleTest/title

script type="text/javascript"

window.onerror = function(message, url, line)

{

alert("Error.\nMessage:"+ message +"\nUrl:" + url + "\nLine:" + line)

return true;

}

/script

/head

body

script type="text/javascript"

test();

test();

test();

test();

/script

script type="text/javascript"

test();

test();

test();

test();

/script

/body

/html

在上面的例子中只會有每一個block中的第一個test();產(chǎn)生error。觸發(fā)window.onerror回調(diào)，后面的Javascript會被忽略掉。img

也支持 onerror img src="pic.gif" onerror = "javascript:alert("An

error occurred.");"/。onerror 是瀏覽器支持的對象。由瀏覽器決定是否可以使用，不是DOM標準。

2.使用Javascript中的try catch throw處理異常。

Javascript支持了try catch throw，Javascript中定義的異常：

(1)EvalError: An error occurs in the eval() function.

(2)RangeError:

A number value is greater then or less then the number that can be

represented in Javascript(Number.MAX_VALUE and Number.MIN_VAKUE).

(3)ReferenceError: An illegal reference is used.

(4)SyntaxError:

A syntax error occus inside of an eval() function call. All other

syntax error are reorted by the browser and cannot be handled with a

try...catch statement.

(5)TypeError. A variables type is unexpected. 6.URIError. An error ocuurs in the encodeURI() or the decodeURI() function.

如：

復(fù)制代碼 代碼如下:

script type="text/javascript"

function CreateError()

{

throw new Error("Created error by custom.");

}

try

{

//throw a error from a function just want to see the call stack in firefox.

CreateError();

}

catch(error)

{

var errorMsg = ("Message: " + error.message + "\n");

if(typeof(error.stack)!=undefined)

{

//FF

errorMsg += ("Line Number: " + error.lineNumber + "\n");

errorMsg += ("File Name: " + error.fileName + "\n");

errorMsg += ("Stack Trace:\n" + error.stack + "\n");

}

else

{

//IE

errorMsg += ("Description: " + error.description + "\n");

errorMsg += ("Number: " + error.number + "\n");

}

alert(errorMsg);

}

finally

{

//alert("End try catch.message from finally block.");

}

/script

Error.message是IE和FireFox都支持的屬性。

IE支持description 和 number屬性。

FF支持fileName lineNumber 和 stack 屬性。

由于Javascript是弱類型的語言。

所以在catch部分只能catch一次，不能像C#這樣的語言可以寫多個catch，catch不同類型的exception。

但是可以用 instanceof ErrorType的方式實現(xiàn)類似的功能。

如：

復(fù)制代碼 代碼如下:

script type="text/javascript"

try

{ //Syntax Error

//eval("alert a");

//Custom Error

throw new Error("An error occured.");

}

catch(error)

{

if(error instanceof SyntaxError)

{

alert("Syntax Error");

}

else if(error instanceof EvalError)

{

alert("Eval Error");

}

else if(error instanceof RangeError)

{

alert("Range Error");

}

else if(error instanceof ReferenceError)

{

alert("Reference Error");

}

else if(error instanceof TypeError)

{

alert("Type Error");

}

else if(error instanceof Error)

{

alert("Custon Error");

}

alert(error.message);

}

/script

注：瀏覽器不會拋出Error類型的exception異常，所以如果捕獲到Error類型的異常，可以確定這個異常是用戶代碼拋出的，不是瀏覽器拋出的。

Javascript的assert()

復(fù)制代碼 代碼如下:

function assert(bCondition, sErrorMsg) {

if (!bCondition) {

alert(sErrorMsg);

throw new Error(sErrorMsg);

}

}

javascript主要用于處理什么

簡單來說，你在瀏覽一個網(wǎng)頁的時候，例如在一個注冊頁面，你填寫了一些注冊信息后，點擊確定，然后突然彈個框出來，說你的某個信息填寫不符合要求，例如用戶名不能使用下劃線開始，密碼不能少于多少個字符等待，都可以用javascript來完成這個驗證，然后彈出警告信息。

概括來說，javascript就是用來做網(wǎng)頁上在客戶端執(zhí)行的一些操作。

以我的一點點經(jīng)驗，我覺得，學(xué)javascript并不需要一開始就很深入的學(xué)，大概了解一下javascript的情況，例如常用的函數(shù)，方法等就可以了。深入的東西，在項目的過程仲就可以慢慢提高，當(dāng)做一個網(wǎng)站的時候，需要用到某些功能，實現(xiàn)某些效果的時候，找一下資料，了解一下需要用到哪些東西，參考一下別人寫的腳本代碼，很快就熟悉了。當(dāng)然，要精通，還是要花很大功夫的。

可以看一下一些大網(wǎng)站的代碼，javascript代碼都是可以看得到的。

javascript中如何處理焦點事件

焦點作為javascript中的一個重要功能，基本上和頁面交互都離不開焦點。但卻少有人對焦點管理系統(tǒng)地做總結(jié)歸納。本文就javascript中的焦點管理作詳細介紹

1、焦點元素

默認情況下，只有表單元素可以獲得焦點。因為只有表單元素可以交互

input?type="text"?value="223"

讓非表單元素獲得焦點也是有辦法的，先將tabIndex屬性設(shè)置為-1，再調(diào)用focus()方法

div?id="test"?style="height:30px;width:100px;background:lightgreen"div/div

button?id="btn"div元素獲得焦點/button

script

btn.onclick?=?function(){

test.tabIndex?=?-1;

test.focus();????

}

test.onfocus?=?function(){

this.style.background?=?'pink';

}

/script

2、activeElement

document.activeElement屬性用于管理DOM焦點，保存著當(dāng)前獲得焦點的元素

注：該屬性IE瀏覽器不支持

div?id="test"?style="height:30px;width:100px;background:lightgreen"div/div

button?id="btn"div元素獲得焦點/button

script

console.log(document.activeElement);//body

btn.onclick?=?function(){

console.log(document.activeElement);//button

test.tabIndex?=?-1;

test.focus();????

console.log(document.activeElement);//div

}

/script

3、獲得焦點

元素獲得焦點的方式有4種，包括頁面加載、用戶輸入(按tab鍵)、focus()方法和autofocus屬性

【1】頁面加載

默認情況下，文檔剛剛加載完成時，document.activeElement中保存的是body元素的引用。文檔加載期間，document.activeElement的值為null

【2】用戶輸入(按tab鍵)

用戶通常可以使用tab鍵移動焦點，使用空格鍵激活焦點。比如，如果焦點在一個鏈接上，此時按一下空格鍵，就會跳轉(zhuǎn)到該鏈接

說到tab鍵，就不能不提到tabindex屬性。tabindex屬性用來指定當(dāng)前HTML元素節(jié)點是否被tab鍵遍歷，以及遍歷的優(yōu)先級

1、如果tabindex=-1，tab鍵跳過當(dāng)前元素

2、如果tabindex=0，表示tab鍵將遍歷當(dāng)前元素。如果一個元素沒有設(shè)置tabindex，默認值就是0

3、如果tabindex大于0，表示tab鍵優(yōu)先遍歷。值越大，就表示優(yōu)先級越小

【3】focus()

focus()方法用于將瀏覽器的焦點設(shè)置到表單字段，即激活表單字段，使其可以響應(yīng)鍵盤事件

注：前面介紹過，若非表單元素，設(shè)置為tabIndex為-1，也可以獲取焦點

【4】autofocus

HTML5表單字段新增了autofocus屬性，只要設(shè)置這個屬性，不用javascript就能自動把焦點移動到相應(yīng)字段　

[注意]該屬性只能用于表單元素，普通元素即使設(shè)置tabIndex="-1"也不生效

【5】hasFocus()

document.hasFocus()方法返回一個布爾值，表示當(dāng)前文檔之中是否有元素被激活或獲得焦點。通過檢測文檔是否獲得了焦點，可以知道是不是正在與頁面交互

4、失去焦點

如果使用javascript使元素失去焦點，那么就要使用blur()方法

blur()方法的作用是從元素中移走焦點。在調(diào)用blur()方法時，并不會把焦點轉(zhuǎn)移到某個特定的元素上；僅僅是將焦點從調(diào)用這個方法的元素上面移走而已

5、焦點事件

焦點事件會在頁面獲得或失去焦點時觸發(fā)。利用這些事件并與document.hasFocus()方法及 document.activeElement屬性配合，可以知曉用戶在頁面上的行蹤

【1】焦點事件共包括下面4個

blur

blur事件在元素失去焦點時觸發(fā)。這個事件不會冒泡

focus

focus事件在元素獲得焦點時觸發(fā)。這個事件不會冒泡

focusin

focusin事件在元素獲得焦點時觸發(fā)。這個事件與focus事件等價，但它冒泡

focusout

focusour事件在元素失去焦點時觸發(fā)。這個事件與blur事件等價，但它冒泡

[注意] 關(guān)于focusin和focusout事件，除了IE瀏覽器支持DOM0級事件處理程序，其他瀏覽器都只支持DOM2級事件處理程序

請說明JavaScript中處理事件的步驟

事件處理程序的方式了：

1. 設(shè)置HTML標簽屬性為事件處理程序

文檔元素的事件處理程序?qū)傩裕涿钟伞皁n”后面跟著事件名組成，例如：onclick、onmouseover。當(dāng)然了，這種形式只能為DOM元素注冊事件處理程序。實例：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow:hidden;}

#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}

#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}

/style

/head

body

div id="div1" onClick="console.log('div1');"div1

div id="div2" oNClick="console.log('div2');"div2

div id="div3" onclick="console.log('div3');" onclick="console.log('div3333');"div3

/div

/div

/div

script type="text/javascript"

/script

/body

/html

結(jié)果（鼠標點擊div3區(qū)域后）：

從結(jié)果中可以看出：

①因為HTML里面不區(qū)分大小寫，所以這里事件處理程序?qū)傩悦髮憽⑿憽⒋笮』鞂懢桑瑢傩灾稻褪窍鄳?yīng)事件處理程序的JavaScript代碼；

②若給同一元素寫多個onclick事件處理屬性，瀏覽器只執(zhí)行第一個onclick里面的代碼，后面的會被忽略；

③這種形式是在事件冒泡過程中注冊事件處理程序的；

2.設(shè)置JavaScript對象屬性為事件處理程序

可以通過設(shè)置某一事件目標的事件處理程序?qū)傩詠頌槠渥韵鄳?yīng)的事件處理程序。事件處理程序?qū)傩悦钟伞皁n”后面跟著事件名組成，例如：onclick、onmouseover。實例：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow:hidden;}

#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}

#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}

/style

/head

body

div id="div1"div1

div id="div2"div2

div id="div3"div3

/div

/div

/div

script type="text/javascript"

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

var div3 = document.getElementById('div3');

div1.onclick = function(){

console.log('div1');

};

div2.onclick = function(){

console.log('div2');

};

div3.onclick = function(){

console.log('div3');

};

div1.onclick = function(){

console.log('div11111');

};

div1.onClick = function(){

console.log('DIV11111');

};

/script

/body

/html

結(jié)果（鼠標點擊div3區(qū)域后）：

從結(jié)果中可以看出：

①因為JavaScript是嚴格區(qū)分大小寫的，所以，這種形式下屬性名只能按規(guī)定小寫；

②若給同一元素對象寫多個onclick事件處理屬性，后面寫的會覆蓋前面的（ps：這就是在修改一個對象屬性的值，屬性的值是唯一確定的）；

③這種形式也是在事件冒泡過程中注冊事件處理程序的；

3.addEventListener()

前兩種方式出現(xiàn)在Web初期，眾多瀏覽器都有實現(xiàn)。而addEventListener()方法是標準事件模型中定義的。任何能成為事件目標的對象——這些對象包括Window對象、Document對象和所有文檔元素等——都定義了一個名叫addEventListener()的方法，使用這個方法可以為事件目標注冊事件處理程序。addEventListener()接受三個參數(shù)：第一個參數(shù)是要注冊處理程序的事件類型，其值是字符串，但并不包括前綴“on”；第二個參數(shù)是指當(dāng)指定類型的事件發(fā)生時應(yīng)該調(diào)用的函數(shù)；第三個參數(shù)是布爾值，其可以忽略（某些舊的瀏覽器上不能忽略這個參數(shù)），默認值為false。這種情況是在事件冒泡過程中注冊事件處理程序。當(dāng)其為true時，就是在事件捕獲過程中注冊事件處理程序。實例：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow:hidden;}

#div2{margin:50px auto; width: 200px; height: 200px; background: green; overflow:hidden;}

#div3{margin:50px auto; width: 100px; height: 100px; background: blue;}

/style

/head

body

div id="div1"div1

div id="div2"div2

div id="div3"div3

/div

/div

/div

script type="text/javascript"

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

var div3 = document.getElementById('div3');

div1.addEventListener('click', function(){ console.log('div1-bubble'); }, false);

div2.addEventListener('click', function(){ console.log('div2-bubble'); }, false);

div3.addEventListener('click', function(){ console.log('div3-bubble'); }, false);

div3.addEventListener('click', function(){ console.log('div3-bubble222'); }, false);

div1.addEventListener('click', function(){ console.log('div1-capturing'); }, true);

div2.addEventListener('click', function(){ console.log('div2-capturing'); }, true);

div3.addEventListener('click', function(){ console.log('div3-capturing'); }, true);

/script

/body

/html

結(jié)果（鼠標點擊div3區(qū)域后）：

從結(jié)果中可以看出：

①addEventListener()第三個參數(shù)的作用正如上面所說；

②通過addEventListener()方法給同一對象注冊多個同類型的事件，并不會發(fā)生忽略或覆蓋，而是會按順序依次執(zhí)行；

相對addEventListener()的是removeEventListener()方法，它同樣有三個參數(shù)，前兩個參數(shù)自然跟addEventListener()的意義一樣，而第三個參數(shù)也只需跟相應(yīng)的addEventListener()的第三個參數(shù)保持一致即可，同樣可以省略，默認值為false。它表示從對象中刪除某個事件處理函數(shù)。實例：

div1.addEventListener('click', div1BubbleFun, false);

div1.removeEventListener('click', div1BubbleFun, false);

function div1BubbleFun(){

console.log('div1-bubble');

}

4.attachEvent()

但是，IE8以及其之前版本的瀏覽器并不支持addEventListener()和removeEventListener()。相應(yīng)的，IE定義了類似的方法attachEvent()和detachEvent()。因為IE8以及其之前版本瀏覽器也不支持事件捕獲，所以attachEvent()并不能注冊捕獲過程中的事件處理函數(shù)，因此attachEvent()和detachEvent()要求只有兩個參數(shù)：事件類型和事件處理函數(shù)。而且，它們的第一個參數(shù)使用了帶“on”前綴的事件處理程序?qū)傩悦嵗?/p>

var div1 = document.getElementById('div1');

div1.attachEvent('onclick', div1BubbleFun);

function div1BubbleFun(){

console.log('div1-bubble');

}

相應(yīng)的，從對象上刪除事件處理程序函數(shù)使用detachEvent()。例如：

div1.detachEvent('onclick', div1BubbleFun);

到此為止，我們已經(jīng)說了瀏覽器中事件傳播機制以及各種注冊事件處理程序的方法。下面我們就再說說事件處理程序調(diào)用時的一些問題吧！

二.事件處理程序的調(diào)用

1.事件處理程序的參數(shù)：正如前面所說，通常事件對象作為參數(shù)傳遞給事件處理函數(shù)，但IE8以及其之前版本的瀏覽器中全局變量event才是事件對象。所以，我們在寫相關(guān)代碼時應(yīng)該注意兼容性問題。實例（給頁面上id為div1的元素添加點擊事件，當(dāng)點擊該元素時在控制臺輸出事件類型和被點擊元素本身）：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

if(div1.addEventListener){

div1.addEventListener('click', div1Fun, false);

}else if(div1.attachEvent){

div1.attachEvent('onclick', div1Fun);

}

function div1Fun(event){

event = event || window.event;

var target = event.target || event.srcElement;

console.log(event.type);

console.log(target);

}

/script

/body

/html

2.事件處理程序的運行環(huán)境：關(guān)于事件處理程序的運行環(huán)境，也就是在事件處理程序中調(diào)用上下文（this值）的指向問題，可以看下面四個實例。

實例一：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1" onclick="console.log('html:'); console.log(this);"div1/div

script type="text/javascript"

/script

/body

/html

結(jié)果一：

從結(jié)果可以看出：

①第一種方法事件處理程序中this指向這個元素本身；

實例二：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1" onclick="console.log('html:'); console.log(this);"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

div1.onclick = function(){

console.log('div1.onclick:');

console.log(this);

};

/script

/body

/html

結(jié)果二：

從結(jié)果可以看出：

①第二種方法事件處理程序中this也指向這個元素本身；

②存在第二種方法時，它會覆蓋第一種方法注冊的事件處理程序；

實例三：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1" onclick="console.log('html:'); console.log(this);"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

div1.onclick = function(){

console.log('div1.onclick:');

console.log(this);

};

div1.addEventListener('click', function(){

console.log('div1.addEventListener:');

console.log(this);

}, false);

/script

/body

/html

結(jié)果三：

從結(jié)果可以看出：

①第三種方法事件處理程序中this也指向這個元素本身；

②第三種方法并不會覆蓋第一種或第二種方法注冊的事件處理程序；

實例四：

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8"/

titletest/title

style type="text/css"

#div1{width: 300px; height: 300px; background: red; overflow: hidden;}

/style

/head

body

div id="div1" onclick="console.log('html:'); console.log(this);"div1/div

script type="text/javascript"

var div1 = document.getElementById('div1');

div1.onclick = function(){

console.log('div1.onclick:');

console.log(this);

};

div1.attachEvent('onclick', function(){

console.log('div1.attachEvent:');

console.log(this === window);

});

/script

/body

/html

結(jié)果四：

從結(jié)果可以看出：

①第四種方法事件處理程序中this指向全局對象Window；

②第四種方法也不會覆蓋第一種或第二種方法注冊的事件處理程序；

3.事件處理程序的調(diào)用順序：多個事件處理程序調(diào)用規(guī)則如下：

①通過HTML屬性注冊的處理程序和通過設(shè)置對象屬性的處理程序一直優(yōu)先調(diào)用；

②使用addEventListener()注冊的處理程序按照它們的注冊順序依次調(diào)用；

③使用attachEvent()注冊的處理程序可能按照任何順序調(diào)用，所以代碼不應(yīng)該依賴于調(diào)用順序；

新聞標題：處理javascript,處理的拼音
文章轉(zhuǎn)載：http://chinadenli.net/article20/dsgigjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、ChatGPT、服務(wù)器托管、做網(wǎng)站、小程序開發(fā)、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)