JS中的函數、Bom、DOM及JS事件

時間 2019-11-11

原文原文鏈接

本期博主給你們帶來JS的函數、Bom、DOM操做，以及JS各類經常使用的數據類型的相關知識，同時，這也是JavaScript極其重要的部分，博主將詳細介紹各類屬性的用法和方法。javascript

1、JS中的函數css

【函數的聲明及調用】
一、函數聲明的格式：
function 函數名(參數1,參數2,參數3,……){
//函數體
return 結果;
}
>>>函數的調用格式：
直接調用：函數調用的格式：函數名(參數一的值，參數二的值，……)；
事件調用：事件名=函數名( );
二、函數聲明的幾點強調：
①函數名的聲明，必須符合小駝峯法則 (首字母小寫，以後每一個單詞首字母大寫)；
②參數列表，能夠有參數，能夠無參數，分別稱爲有參函數、無參函數；
③聲明函數時的參數列表，稱爲「形參列表」（變量的名）；
調用函數時的參數列表，稱爲「實參列表」（變量的值）；
函數中，實際有效的參數取決於實參的賦值，未被賦值的形參，將爲Undefined；
④函數若是須要返回值，可用return返回結果。
調用函數時，使用var 變量名=函數名（）；的方式，接受返回結果；
若是函數沒有返回值，則接受結果爲Undefined。

⑤函數中變量的做用域：
在函數中，使用var聲明的變量，默認爲函數局部變量，只在函數內部能用；
不用var聲明的變量，默認爲全局變量（函數中的全局變量，必須在函數調用後才能使用）；
函數的形參列表，爲函數局部變量，只在函數內部使用。

⑥函數聲明與函數調用，沒有前後之分。即，調用語句能夠寫在聲明語句以前。html

【匿名函數的聲明及調用】
一、聲明一個匿名函數，直接賦給某個事件；
window.onload=function(){ };
二、使用函數表達式聲明匿名函數;
聲明函數表達式：var func=function(){ }
調用函數表達式：func（）；
>>>使用匿名函數表達式，則調用語句，必須在聲明語句以後，不然報錯（對比
常規函數聲明與調用區別？)

三、使用自執行函數，聲明並直接調用匿名函數：
①！function（）{ }（）；//使用任意運算符開頭，通常使用！
②（function ( ){ }( )）；//使用（）將匿名函數以後的括號包裹
③(function( ){ })( ) //使用( )只包裹匿名函數表達式
三種寫法特色：
①結構清晰，開頭加！，結尾加()。不容易亂，推薦使用；
②能夠代表匿名函數與以後的()爲一個總體，推薦使用；
③沒法代表函數與以後()爲一個總體，不推薦使用：

java

window.onload=function(){
console.log("使用widow.onload調用匿名事件");
};



function func1(){
console.log("調用無參函數")
}

function func1(num1,num2,nnum3){
var num=num1;
console.log("調用有參函數");
console.log("num爲："+num);
console.log("參數1爲："+num1);
console.log("參數2爲："+num2);
console.log("參數3爲："+num3);
return 1;
}

var num=func2(1,2,3,4);
console.log(num);

【JS中代碼執行順序】
JS中代碼運行，會先進行檢查、裝載，即聲明變量、函數等操做：
而後再進入執行階段，(變量的賦值等屬於執行階段)

因此，函數的聲明屬於檢查裝載階段，函數的調用屬於執行階段。so，函數調用語
句寫在函數聲明語句以前，井沒有任何關係。

因此，上述代碼，執行流入
----------檢查裝載階段------
var num；//聲明變量
function funcN（) //聲明函數
--- ----執行階段-----
console. log(num);
num=10;
funNoi //執行函數的{ }中代碼

【函數內部的屬性】
Arguments對象
一、做用：用於保存調用函數時，所賦值的實參列表。
>>>當咱們調用函數，並使用實參賦值時，實際上參數已經保存到Arguments數組中。即便沒有形參，也可使用Arguments[n]的
形式調用參數；

二、Arguments數組的個數：取決於實參列表，與形參無關形（順序從0開始）；
但，當第n個位置的形參、實參、Arguments都存在時，形參與Arguments是同步的（即在函數中修改其中一個值，另外一個會同步變化。）。

三、Arguments.callee是Arguments的重要屬性，，用於返回arguments所在的函數引用；
arguments.callee( )能夠調用自身函數執行；
在函數內部調用函數自身的寫法，被稱爲遞歸，因此arguments.callee( )是遞歸調用時經常使用的方式。

this：函數調用語句所在的做用域，即，誰調用函數，this指向誰。

數組

function func4(){
console.log("Arguments對象");
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
console.log(arguments[3]);
console.log(arguments[4]);
}
func4(1,2,3,4)

2、JS中的Bom瀏覽器對象模型瀏覽器

screen對象：

console.log(screen.whidth); //屏幕寬度
console.log(screen.height); //屏幕高度
console.log(screen.availablewhidth);//可用寬度
console.log(screen.availHeight); //可用高度=屏幕高度-底部任務欄。

location對象：
完整URL路徑：
協議：//主機名（IP地址）：端口號/文件路徑？傳遞參數（參數名=參數值/name1=value1&&name2=value2）
>>>（端口號不寫默認爲80端口）

console.log(location.href); //完整路徑
console.log(location.protocol); //路徑使用的協議http： https： ftp： file： mailto：
console.log(location.pathname); //文件路徑部分
console.log(location.port); //端口號
console.log(location.search); //從?開始日後的部分
console.log(location.hostname); //主機名（IP地址）
console.log(location.host); //主機名+端口號
console.log(location.hash); //從#開始的錨點
// 使用JS設置頁面跳轉
//window.location = "http://www.baidu.com";

function locationAssign(){

加載新的文檔，加載之後，能夠回退

location.assign("http://www.baidu.com");
}
function locationReplace(){

服務器

使用新的文檔，替換當前文檔。替換之後，不能回退；

location.replace("http://www.baidu.com");
}
function locationReload(){

從新加載當前頁面。
reload(true)：從服務器從新加載當前頁面
reload():在本地刷新當前頁面

location.reload(true);
}

history
一、length：瀏覽歷史列表的個數
二、history.forward(); 前進到前一個頁面
三、history.back(); 後退到後一個頁面
四、history.go(-1); 跳轉到瀏覽歷史列表的任意位置
位置標誌：當前頁爲第0個，前一個頁面第1個，後一個頁面-1個

console.log(history);
function historyForward(){
history.forward();
}
function historyBack(){
history.back();
}
function historyGo(){
history.go(-1);
}

app

Navigator 瞭解

console.log(navigator.appName); //產品名稱
console.log(navigator.appVersion); //產品版本號
console.log(navigator.userAgent); //用戶代理信息
console.log(navigator.platform); //系統平臺

navigator.plugins。返回一個數組，檢測瀏覽器安裝的全部插件
>>>主要的屬性：
description:插件的描述信息
filename:插件在本地磁盤的文件名
length:插件的個數
name：插件名

console.log(navigator.plugins);//檢查瀏覽器安裝的插件信息

navigator.mimeTypes 瀏覽器插件，所支持的文件類型
>>>主要屬性
description：MIME類型描述
enabledPlugin：支持此類型的瀏覽器插件
suffixes：此類型可能的後綴名
type：MIME類型的寫法，例如： image/x-icon text/css

console.log(navigator.mimeTypes);//檢查瀏覽器安裝的插件支持的文件類型

【重點】window對象的經常使用方法
>>>window對象中的全部方法，都可省略window.，好比close( );

一、prompt：彈窗接受用戶輸入；
二、alert：彈窗警告；
三、confirm：帶有確認/取消按鈕的提示框；
四、close：關閉瀏覽器選項卡；
五、open：從新打開一個窗口，傳入參數：URL/窗口名稱/ 窗口特徵（兼容性不好）
六、setTimeout：設置延時執行，只會執行一次；
七、setInterval：設置定時器，循環每隔n毫秒執行一次；
兩個參數，須要執行的function/毫秒數；

八、clearTimeout：清除延時；
九、clearInterval：清除的定時器；
傳入參數，調用setInterval時返回一個ID，經過變量接收ID，傳入clearInterval。

函數

  var isTrue = confirm("我是帥哥嗎？");
   if (isTrue) {
    alert("我也是這麼以爲！");
   } else{
    alert("你是否是瞎？");
   }

function closeWindow(){
close();
}

function openWindow(){
window.open("http://www.baidu.com","百度一下","height=300px,width=200px,");
}





var timeOutId = setTimeout(function(){
console.log("setTimeout");
},5000);

var num = 10;

var interValId = setInterval(function (){
console.log(num);
num--;
if(num==0){
clearInterval(interValId);
}
},1000);

function clearTimeOutBtn(){
clearTimeout(timeOutId);
}

function clearIntervalBtn(){
clearInterval(interValId);
}

console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n");

</script>

</head>
<body>
<button onclick="locationReplace()">location.replace();使用新的文檔替換當前文檔</button>
<button onclick="locationAssign()">location.assign();加載新的文檔</button>
<button onclick="locationReload()">location.reload();從新加載當前的文檔</button>
<br />
<button onclick="historyBack()">使用history.back()後退</button>
<button onclick="historyForward()">使用history.forward()前進</button>
<button onclick="historyGo()">使用history.go()跳轉到歷史列表任意位置</button>
<br />

<button onclick="closeWindow()">關閉瀏覽器窗口</button>
<button onclick="openWindow()">打開一個新的瀏覽器窗口</button>

<button onclick="clearTimeOutBtn()">clearTimeOut</button>
<button onclick="clearIntervalBtn()">clearInterval</button>


</body>
</html>

3、JS中的DOM操做flex

【Dom樹節點】
DOM節點分爲三大類：元素節點、文本節點

【查看節點】
一、getElementById：經過ID獲取惟一的節點；多個同名ID，只會取第一個；
二、getElementByName：經過Name取到一個數組，包括1到多個節點；
使用方式：經過循環，取到每個節點。循環次數：從0開始，<數組.length 。

【查看和設置屬性節點】
一、查看屬性節點：getAttribute("屬性名")；
二、設置屬性節點：setAttribute("屬性名"，"屬性值");

【JS修改樣式總結】
一、.className：爲元素設置一個新的class名字。
div1.className="class1";
二、.style：爲元素設置一個新的樣式，注意駝峯命名法；
div1.style.backgroundColor="red";
三、.style.cssText：爲元素同時修改多個樣式；
div1.style.cssText="width: 100px; height: 100px;";

【查看節點】
一、tagName屬性：獲取節點的標籤名；
二、innerHTML：設置或者獲取節點內部的全部HTML代碼；
三、innerText：設置或者獲取節點內部的全部文字；

window.onload=function( ){
var div1=document.getElementById("div1");    
console.log(div1);
}
function getById(){
//取到元素節點的樣式屬性節點
var divStyle=document.getElementById("div1").style;    
divStyle.backgroundColor="blue";//全部節點屬性一概使用駝峯命名法
//取到元素節點
var div=document.getElementById("div1");
div.innerHTML="liuyongqi";//重置div中的HTML代碼
}

function getByName(){

var div=document.getElementsByName("div1");    

for(var i=0;i<div.length;i++){
div[i].style.backgroundColor="blue";    
}    

}

function getByTagName(){

var div=document.getElementsByTagName("div");    

for(var i=0;i<div.length;i++){
div[i].style.backgroundColor="blue";    
}    


}

function getByClassName(){

var div=document.getElementsByClassName("div1");    
for(var i=0;i<div.length;i++){
div[i].style.backgroundColor="blue";    
}    


}

function getAttr(){
var img1=document.getElementById("img1");
alert(img1.getAttribute("src"));

}

function setAttr(){
var img1=document.getElementById("img1");
img1.setAttribute("src","img/hot-caramel-macchiato-20151022185811.jpg");
img1.setAttribute("title","我被setAttribute設置了title");
img1.setAttribute("style","width: 100px;height: 100px;");


}

</script>

<style type="text/css">
.div1{
width: 100px;
height: 100px;
background-color: red;
}

</style>
</head>


<body>
<button onclick="getById()">經過ID修改divcolor</button>
<button onclick="getByName()">經過name修改divcolor</button>
<button onclick="getByTagName()">經過tagName修改divcolor</button>
<button onclick="getByClassName()">經過className修改divcolor</button>
<button onclick="getAttr()">經過getattribute顯示圖片路徑</button>
<button onclick="setAttr()">經過setattribute更換圖片</button>
<img src="img/green-tea-cream-frappuccino-20151022185851.jpeg" id="img1"/>

<div id="div1" name="div1" class="div1">
div文字
</div>
<div id="div1" name="div1" class="div1">
div文字
</div>
<div id="div1" name="div1" class="div1">
div文字
</div>



</body>
</html>

【獲取層次節點的經常使用屬性】
一、.childNodes：獲取元素的全部子節點（包含元素節點/文本節點）；
二、.firstChild：獲取元素的第一個子節點；
三、.lastChild：獲取元素的最後一個子節點；
四、.ownerDocument：獲取當前文檔根節點，在HTML文檔中，爲document節點；
五、.parentNode：獲取當前節點的父節點；
六、.previousSibling：獲取當前節點的前一個兄弟節點；
七、.nextSibling：獲取當前節點的後一個兄弟節點；
！注：上述屬性，均會得到全部的元素節點和文本節點，若是隻須要元素節點，須要使用對應Element屬性，
例如：firstChild---->firstElementChild

八、.attributes：獲取當前元素節點的全部屬性節點；

var ul1=document.getElementById("ul1");
var lis=ul1.getElementsByTagName("li");//獲取ul1裏面的全部li
console.log(ul1.childNodes);//獲取ul1裏面的全部子節點（包含元素節點/文本節點）
console.log(ul1.childNodes);

}

【建立並新增節點】
一、.createElement("標籤名")：建立一個新的節點。須要配合.setAttribute()方法設置新節點的相關屬性。
二、.appendChild(節點名)：在某元素最後追加一個新節點
三、.insertBefore：將新節點，插入到目標節點以前；
四、克隆節點.cloneNode(true/false)：須要克隆誰，就用誰去調用克隆對象；
>＞>傳遞參數能夠爲true或false
①true：克隆當前節點及全部子節點；
⑨false：只克隆當前節點，不克隆子節點(默認)；

【刪除/替換節點】
一、.removeChild(需刪除節點)：從父容器中，刪除指定節點；
二、.replaceChild(新節點，被替換節點)：用新節點替換指定節點，若是新節點已有在頁面中存在，會先刪除掉原有
節點，再替換掉指定節點；

function appendImg(){

//一、建立一個圖片節點
var img=document.createElement("img");
//二、給img節點設置屬性
img.setAttribute("src","img/green-tea-cream-frappuccino-20151022185851.jpeg");
//三、將設置好的img節點追加到body最後
document.body.appendChild(img);
}



function insertImg(){
//一、建立一個圖片節點
var img=document.createElement("img");
//二、給img節點設置屬性
img.setAttribute("src","img/green-tea-cream-frappuccino-20151022185851.jpeg");
//三、在兩個ul之間插入圖片
var ul2=document.getElementById("ul2");
document.body.insertBefore(img,ul2);
}

function copyUl(){
var ul2=document.getElementById("ul2");
//克隆ul2節點
var ul2clone=ul2.cloneNode(true);
//在按鈕前，插入新節點（因爲ID同名問題，第一個之後都在前一個新ul2以前插入。可用變量控制！）
var btn=ul2.nextElementSibling;
document.body.insertBefore(ul2clone,btn);
}







</script>

<style type="text/css">
ul{
width: 600px;
list-style: none;
padding: 0;
display: flex;
background-color: yellow;
justify-content: space-around;
margin-top: 20px;
}




</style>
</head>
<body>
<ul id="ul1" class="ul1">
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li>第四項</li>
</ul>

<ul id="ul2">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>

<button onclick="appendImg()">在最後插入一幅圖片</button>
<button onclick="insertImg()">在兩個ul之間插入一幅圖片</button>
<button onclick="copyUl()">copy一個ul2</button>
</body>
</html>

【表格對象】
一、rows屬性：返回表格中全部行，數組；
二、inserRow(index)：在表格的第index+1行，插入一個新行；
三、deleteRow(index)：刪除表格的第index+1行；

[表格的行對象]
一、cells屬性：返回當前行中全部單元格，數組；
二、rowIndex屬性：返回當前行，在單元格中的索引順序，從0開始；
三、insertCell(index)：在當前行的第index+1處，插入一個新<td>；
四、deleteCell(index)：刪除當前行的第index+1個<td>；

[表格的單元格對象]
一、 cellIndex屬性：返回單元格在改行的索引順序，從0開始；
二、 innerHTML屬性：返回或設置當前單元格中的HTML代碼；
三、 align屬性：設置當前單元格的水平對齊方式；
四、 className屬性：設置單元格的class名稱；

function newRow(){
var table = document.getElementById("table");
// 在表格的最後一行，插入一個新行
var newRow = table.insertRow(table.rows.length-1);
// 給新行設置單元格
var cell0 = newRow.insertCell(0);
cell0.innerHTML = "葵花寶典";
var cell1 = newRow.insertCell(1);
cell1.innerHTML = "66元";

getSum();
}

function delRow(){
var table = document.getElementById("table");
if(table.rows.length>2){
table.deleteRow(table.rows.length-2);
}else{
alert("已經沒了！刪毛線啊！");
}

getSum();
}

function changeTitle(){
var color = prompt("請輸入6位16進制顏色值：");
var table = document.getElementById("table");
table.rows[0].style = "background-color:#"+color;
}

function copyRow(){
var table = document.getElementById("table");
var copyRow = table.rows[table.rows.length-2].cloneNode(true);
var heji = table.rows[table.rows.length-1];

// 因爲瀏覽器，自動將表格的<tr>包裹在<tbody>中
// 因此<tr>實際並不是<table>的子節點，故需取到<table>中的<tbody>進行插入
if(table.rows.length>2){
table.getElementsByTagName("tbody")[0].insertBefore(copyRow,heji);
}else{
alert("沒有能夠複製的行");
}

getSum();
}

function getSum(){
var table = document.getElementById("table");
var rows = table.rows;
if(rows.length<=2){
alert("沒有可計算的行！");
rows[rows.length-1].cells[1].innerHTML = 0+"元";
return;
}

var sum = 0;
for(var i=1;i<=rows.length-2;i++){
var cells = rows[i].cells;
sum += parseFloat(cells[cells.length-1].innerText);
}

rows[rows.length-1].cells[1].innerHTML = sum.toFixed(2)+"元";
}

window.onload = function(){
getSum();
}


</script>

<style type="text/css">
table{
border-collapse: collapse;
width: 400px;
}
td,th{
border: 1px solid #000000;
}
table tr:last-child{
color: red;
}
</style>
</head>

<body>

<table id="table">
<tr>
<th>書名</th>
<th>價格</th>
</tr>
<tr>
<td>看得見風景的房間</td>
<td>30.00元</td>
</tr>
<tr>
<td>幸福從天而降</td>
<td>18.50元</td>
</tr>
<tr>
<td>60個瞬間</td>
<td>30.99元</td>
</tr>
<tr>
<td>合計</td>
<td></td>
</tr>
</table>

<br />

<button onclick="newRow()">增長一行</button>
<button onclick="delRow()">刪除最後一行</button>
<button onclick="changeTitle()">修改標題樣式</button>
<button onclick="copyRow()">複製最後一行</button>
<button onclick="getSum()">合計</button>

</body>
</html>

4、JS事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: yellow;
}
#div2{
width: 100px;
height: 100px;
background-color: blue;
}
#div3{
width: 50px;
height: 50px;
background-color: red;
}

</style>

<script type="text/javascript">
/*【JS中的事件分類】
一、鼠標事件：
click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup;
二、鍵盤事件：
keydown：鍵盤按下去觸發；
keypress：鍵盤按下鬆開的瞬間觸發；
keyup：鍵盤擡起時觸發；

[注意事項（瞭解）]
①執行順序：keydown——keypress——keyup；
②長按時，會循環不斷地執行keydown——keypress；
③有keydown事件，不必定有keyup事件（例如事件觸發過程當中，鼠標移走，不會觸發keyup）
④keypress事件，只能捕獲字母數字符號建，不能捕獲功能鍵；
keyup/keydown基本能夠捕獲全部功能鍵（特殊除外）；
⑤keypress區分大小寫，keydown和keyup不區分；
⑥keydown和keyup區分大小鍵盤，keypress不區分；

【肯定鍵盤觸發按鍵】
①在觸發函數中，傳入參數e，表明按鍵事件；
②經過e.keyCode==？，確認Ascii碼值，進而肯定按鍵；
③兼容全部瀏覽器系統的寫法(通常沒必要要)：
var evn=e||event;//取到鍵盤事件；
var code=evn.keyCode||evn.which||evn.charCode;//取到按鍵編碼；
*/

document.onkeydown=function(e){
var evn=e||event;
var code=evn.keyCode||evn.which||evn.charCode;
console.log(e);
if(code==13){
alert("你按了回車")
}
}
document.onkeypress=function(e){
console.log(e);
}
document.onkeyup=function(e){
console.log(e);
}
/*【JS中的DOM0模型】
一、內聯模型：直接將函數名做爲HTML標籤的某個事件屬性的屬性值；
eg：<button onclick="func()">按鈕</button>
缺點：違反了w3c關於HTML與JavaScript分離的基本原則；

二、腳本模型：在JS腳本中經過時間屬性進行綁定；
eg：window.onload=function(){}
侷限性：同一節點只能綁定一個同類型事件；

【JS中的DOM2事件模型】
一、添加事件綁定：
IE10以前：btn1.btn1.attachEvent("onclick",函數)；
其餘瀏覽器：btn1.addEventListener("click",函數，true/false)；
參數三：false（默認），表示事件冒泡；true，表示事件捕獲
兼容寫法：if((btn1.attachEvent){
btn1.attachEvent();
}else{
btn1.addEventListener();
}
優勢：同一節點，能夠添加多個同類型事件的監聽器；
二、取消事件綁定：
注：若是取消事件綁定時，那麼在綁定時，回調函數必須使用有名函數，不能使用匿名函數，由於在取消事件綁定時，須要傳入函數名
其餘瀏覽器 .removeEventListener("click",函數名)；
IE瀏覽器：.decathEventListener("onclick",函數名)；

window.onload=function(){
var btn1 = document.getElementById("btn1");
function func1(){
alert(1);
}
btn1.addEventListener("click",func1,false);
btn1.addEventListener("click",function(){ alert(2); },false);
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function(){ 
btn1.removeEventListener("click",func1); 
},false);
//if(btn1.addEventListener())；


}

</script>

</head>
<body>

<button id="btn1">點擊我彈個窗</button>
<button id="btn2">點擊我就是不讓他彈</button>


<div id="div1">
<div id="div2">
<div id="div3">div3</div>
div2
</div>
div1
</div>

<a href="../01-js變量輸入輸出/01_JS簡介和變量.html">點擊跳轉頁面</a>


</body>

【JS中的事件流】
一、事件冒泡：當某DOM元素觸發某事件時，會從當前DOM開始，逐個觸發其祖先元素的同類型事件，直到DOM根節點；
DOM0模型：均爲事件冒泡；
IE中使用.decathEventListener("onclick",函數名)添加事件，均爲冒泡；
其餘瀏覽器.addEventListener添加事件，並設置第三個參數爲false時，爲冒泡；

二、事件捕獲：當某DOM元素觸發某事件時，會從DOM根節點開始，逐個觸發其祖先元素的同類型事件，直到觸發到當前元素爲止；
只有使用.addEventListener添加事件，並設置第三個參數爲true時，才進行捕獲；

三、阻止事件冒泡：
IE瀏覽器：將 e.cancelBubble 設置爲 true;
其餘瀏覽器：調用e.stopPropagation();方法
兼容寫法：function stop(e){
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE之外
} else {
e.cancelBubble = true; //IE
}
}

三、阻止默認事件：
IE瀏覽器中：將e.returnValue屬性設爲false；
其餘瀏覽器：調用e.preventDefault();方法
兼容寫法：function eventHandler(e) {
e = e || window.event;
// 防止默認行爲
if (e.preventDefault) {
e.preventDefault(); //IE之外
} else {
e.returnValue = false; //IE
}
}

var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var div3=document.getElementById("div3");
function stop(e){
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE之外 
} else {
e.cancelBubble = true; //IE 
}
}


div1.addEventListener("click",function(e){ console.log("div1觸發了click事件");
stop();
e.stopPropagation();
},false);
div2.addEventListener("click",function(e){ console.log("div2觸發了click事件");
stop();
e.stopPropagation();
},false);
div3.addEventListener("click",function(e){ console.log("div3觸發了click事件");
stop();
e.stopPropagation();
},false);

</script>
</html>

以上本次分享教程內容，感謝你們的持續關注，再見！