1.使用window.onerror指定錯誤處理函數(shù)。
公司主營業(yè)務：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出南沙免費做網(wǎng)站回饋大家。
當有錯誤的時候，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);
}
}
簡單來說，你在瀏覽一個網(wǎng)頁的時候，例如在一個注冊頁面，你填寫了一些注冊信息后，點擊確定，然后突然彈個框出來，說你的某個信息填寫不符合要求，例如用戶名不能使用下劃線開始，密碼不能少于多少個字符等待，都可以用javascript來完成這個驗證，然后彈出警告信息。
概括來說，javascript就是用來做網(wǎng)頁上在客戶端執(zhí)行的一些操作。
以我的一點點經(jīng)驗，我覺得，學javascript并不需要一開始就很深入的學，大概了解一下javascript的情況，例如常用的函數(shù)，方法等就可以了。深入的東西，在項目的過程仲就可以慢慢提高，當做一個網(wǎng)站的時候，需要用到某些功能，實現(xiàn)某些效果的時候，找一下資料，了解一下需要用到哪些東西，參考一下別人寫的腳本代碼，很快就熟悉了。當然，要精通，還是要花很大功夫的。
可以看一下一些大網(wǎng)站的代碼，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
從上面的代碼中我們可以看出，事件處理是直接嵌套在元素里頭的，這樣有一個毛?。壕褪莌tml代碼和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
事件處理程序的方式了：
1. 設(shè)置HTML標簽屬性為事件處理程序
文檔元素的事件處理程序?qū)傩?，其名字由“on”后面跟著事件名組成，例如：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ū)傩悦髮?、小寫、大小混寫均可，屬性值就是相應事件處理程序的JavaScript代碼；
②若給同一元素寫多個onclick事件處理屬性，瀏覽器只執(zhí)行第一個onclick里面的代碼，后面的會被忽略；
③這種形式是在事件冒泡過程中注冊事件處理程序的；
2.設(shè)置JavaScript對象屬性為事件處理程序
可以通過設(shè)置某一事件目標的事件處理程序?qū)傩詠頌槠渥韵鄳氖录幚沓绦?。事件處理程序?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ā)生時應該調(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ù)也只需跟相應的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()。相應的，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');
}
相應的，從對象上刪除事件處理程序函數(shù)使用detachEvent()。例如：
div1.detachEvent('onclick', div1BubbleFun);
到此為止，我們已經(jīng)說了瀏覽器中事件傳播機制以及各種注冊事件處理程序的方法。下面我們就再說說事件處理程序調(diào)用時的一些問題吧！
二.事件處理程序的調(diào)用
1.事件處理程序的參數(shù)：正如前面所說，通常事件對象作為參數(shù)傳遞給事件處理函數(shù)，但IE8以及其之前版本的瀏覽器中全局變量event才是事件對象。所以，我們在寫相關(guān)代碼時應該注意兼容性問題。實例（給頁面上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)用，所以代碼不應該依賴于調(diào)用順序；
您好，你的問題，我之前好像也遇到過，以下是我原來的解決思路和方法，希望能幫助到你，若有錯誤，還望見諒！第一種方式存在瀏覽器兼容性問題，有些瀏覽器會默認把事件對象作為第一個參數(shù)傳遞到函數(shù)，有些則不會，遇到這種情況，只要直接獲取event對象即可（下面是兼容所有瀏覽器的代碼）：
function handler(e){
var e=e||event;
console.log(e);
}非常感謝您的耐心觀看，如有幫助請采納，祝生活愉快！謝謝！
重慶分公司
重慶分公司
