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

事件處理程序的方式了：

創(chuàng)新互聯(lián)是一家專業(yè)提供溆浦企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、HTML5建站、小程序制作等業(yè)務(wù)。10年已為溆浦眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。

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

文檔元素的事件處理程序?qū)傩裕涿钟伞皁n”后面跟著事件名組成，例如：onclick、onmouseover。當然了，這種形式只能為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ù)是指當指定類型的事件發(fā)生時應(yīng)該調(diào)用的函數(shù)；第三個參數(shù)是布爾值，其可以忽略（某些舊的瀏覽器上不能忽略這個參數(shù)），默認值為false。這種情況是在事件冒泡過程中注冊事件處理程序。當其為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的元素添加點擊事件，當點擊該元素時在控制臺輸出事件類型和被點擊元素本身）：

!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中正確處理錯誤的方法有幾種

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

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

如：

復制代碼 代碼如下:

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.

如：

復制代碼 代碼如下:

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)類似的功能。

如：

復制代碼 代碼如下:

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()

復制代碼 代碼如下:

function assert(bCondition, sErrorMsg) {

if (!bCondition) {

alert(sErrorMsg);

throw new Error(sErrorMsg);

}

}

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中修改，一兩處的修改我們能接受，但是當你的代碼達到萬行級別的時候，修改起來就需要勞民傷財了，所以，這個方式我們并不推薦使用。

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,處理違章去車管所還是交警大隊
網(wǎng)頁路徑：http://chinadenli.net/article35/dsggssi.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站排名、企業(yè)建站、自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(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)