一劣摇、BOM簡介
BOM(Browser Object Model) 是指瀏覽器對象模型，在JS中BOM是個不折不扣的花心大蘿卜弓乙，因為它有很多個對象末融，其中代表瀏覽器窗口的Window對象是BOM的“正室”钧惧、也就是最重要的，其他對象都是正室的下手勾习、或者叫側(cè)室也不足為過浓瞪。
BOM對象詳解
- BOM的正室——window對象。
window對象代表瀏覽器窗口巧婶，是JS的BOM中最常用到的對象乾颁，下面就跟大家介紹一下領(lǐng)悟window對象的常用方法。
① prompt：彈窗接受用戶輸入艺栈；
② alert：彈窗警告英岭；
③ confirm：帶有確認(rèn)/取消按鈕的提示框；
④ close：關(guān)閉瀏覽器窗口湿右；
⑤ open：重新打開新窗口诅妹，傳入?yún)?shù)URL/窗口名稱/窗口特征；
⑥ setTimeout：設(shè)置延時執(zhí)行毅人，只會執(zhí)行一次（兩個參數(shù)：需要執(zhí)行的function/毫秒數(shù)）吭狡；
⑦ setInterval：設(shè)置定時器，循環(huán)每隔N毫秒執(zhí)行一次（傳入?yún)?shù)：調(diào)用setInterval時返回一個ID丈莺，通過變量接受ID划煮，傳入clearInterval）；
⑧ clearTimeout：清除延遲缔俄；
⑨ clearInterval：清除定時器弛秋；
在這九種方法中，最常用到也是這里面最麻煩的四種是setTimeout/clearTimeout和setInterval/clearInterval牵现，它們兩兩對應(yīng)铐懊，常放在一起搭配使用。下面就給大伙舉一個這方面的栗子~
（栗子：setTimeout/clearTimeout）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首先是setTimeout與clearTimeout</title>
<!--要記得首先打開控制臺喲~-->
<script type="text/javascript">
var timeoutid = setTimeout(function(){
console.log("setTimeout");
},5000) ; function clearTimeoutBtn(){
clearTimeout(timeoutid);
}
</script>
</head>
<body>
<button onclick="clearTimeoutBtn()">clearTimeout</button>
</body>
</html>
（栗子：setInterval/clearInterval）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>然后是setInterval與clearInterval</title>
<!--要記得首先打開控制臺喲~-->
<script type="text/javascript">
var num = 10;
var timeinterval = setInterval(function(){
num--;
console.log(num);
if (num==0){
clearInterval(timeinterval);
}
},1000)
function clearIntervalBtn(){
clearInterval(timeinterval);
}
</script>
</head>
<body>
<button onclick="clearIntervalBtn()">clearIntervar</button>
</body>
</html>
- BOM的側(cè)室們——其他對象簡述
因為除window對象外的其他BOM對象在實際的JS撰寫中很少出現(xiàn)瞎疼，所以本K就以代碼的形式給大家簡單提一下科乎。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM的側(cè)室們</title>
<!--要記得首先打開控制臺喲~-->
<script type="text/javascript">
// screen對象
console.log(screen);
console.log(screen.width);//寬度
console.log(screen.height);//高度
console.log(screen.availHeight);//可用高度=屏幕高度-底部任務(wù)欄
console.log(screen.availWidth);//可用寬度
// location對象
// 完整的url路徑：
// 協(xié)議：// 主機名（IP地址）:端口號（默認(rèn)80端口）/文件路徑?傳遞的參數(shù)（參數(shù)名0=參數(shù)值0&參數(shù)名1=參數(shù)值1）#錨點
console.log(location);
console.log(location.href);//完整路徑
console.log(location.protocol);//路徑協(xié)議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設(shè)置頁面跳轉(zhuǎn)
// window.location="http://www.baidu.com";
function locationReload(){ //重新加載當(dāng)前頁面
location.reload(true);
//reload(true)表示從服務(wù)器重新加載當(dāng)前頁面；reload()在本地刷新當(dāng)前頁面
}
function locationAssign(){
location.assign("http://www.baidu.com");
//加載新的文檔贼急，替換以后可以回退
}
function locationReplace(){
location.replace("http://www.baidu.com");
//使用新的文檔替換當(dāng)前文檔茅茂，替換后不能回退
}
// history
// length : 瀏覽歷史列表的個數(shù)
// history.forward(); ： 前進到前一個頁面
// history.back(); ： 后退到后一個頁面
// history.go(); : 跳轉(zhuǎn)到歷史瀏覽歷史的任意位置；當(dāng)前頁為第0個太抓，前一個頁面為第1個空闲，后一個頁面為第-1個
console.log(history.length);
function historyForword(){
history.forward();
} function historyBack(){
history.back();
} function historyGo(){
history.go(); // 0
// 1 = history.forward();
// -1 = history.back();
}
// Navigator
console.log(navigator.appName);//產(chǎn)品名稱
console.log(navigator.appVersion);//產(chǎn)品版本號
console.log(navigator.userAgent);//用戶代理信息
console.log(navigator.platform);//系統(tǒng)代理平臺
console.log(navigator.plugins);//檢查瀏覽器安裝的插件信息
// 返回一個數(shù)組，檢測瀏覽器安裝的所有插件(↓主要屬性↓)
// description ： 插件描述信息
// filename ： 插件在本地磁盤的文件名
// length ： 插件的個數(shù)
// name ： 文件名
console.log(navigator.mimeTypes);
//瀏覽器插件所支持的文件類型(↓主要屬性↓)
// description：MIME類型描述
// enabledPlugin：支持此類型的瀏覽器插件
// suffixes：此類型可能的后綴名
// type：MIME類型的寫法走敌，例如：image/x-icon text/css
</script>
</head>
<body>
<button onclick="locationAssign()">加載新的文檔</button>
<br />
<button onclick="locationReload()">重新加載當(dāng)前文檔</button>
<br />
<button onclick="locationReplace()">使用新的文檔替換當(dāng)前文檔</button>
<br />
<button onclick="historyForword()">這個是historyForword</button>
<br />
<button onclick="historyBack()">這個是historyBack</button>
<br />
<button onclick="historyGo()">這個是historyGo</button>
</body>
</html>
二碴倾、DOM
1.DOM簡介
DOM（Document Object Model），是指文檔對象模型，是W3C組織推薦的處理可擴展標(biāo)志語言的標(biāo)準(zhǔn)編程接口跌榔。在網(wǎng)頁上异雁，組織頁面（或文檔）的對象被組織在一個樹形結(jié)構(gòu)中，用來表示文檔中對象的標(biāo)準(zhǔn)模型僧须，而DOM中的每一條分支都被稱作一個“節(jié)點”纲刀，所有節(jié)點及節(jié)點屬性構(gòu)成的結(jié)構(gòu)圖會呈現(xiàn)出很強的層次性（栗子如下圖，源于萬能的度娘）担平。
DOM節(jié)點分為三大類：元素節(jié)點示绊，文本節(jié)點，屬性節(jié)點暂论。文本節(jié)點面褐、屬性節(jié)點為元素節(jié)點的兩個子節(jié)點，通過gelElement系列方法空另，可以取到元素節(jié)點盆耽。
DOM
2.DOM操作詳解
DOM操作是JS中應(yīng)用性非常強的一部分，所以本K就以代碼的形式來給大家敘述扼菠。
- 獲取節(jié)點與樣式修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM代碼詳述（一）</title>
<script type="text/javascript">
window.onload = function(){
var p1 = document.getElementById("p1");
//通過ID獲取唯一的節(jié)點；多個同名ID只會取第一個
console.log(p1);
console.log(p1.tagName);//查看節(jié)點：①屬性坝咐；獲取節(jié)點的標(biāo)簽名
console.log(p1.innerHTML);//②設(shè)置或者獲取節(jié)點內(nèi)部的所有HTML代碼
console.log(p1.innerText);//③設(shè)置或者獲取節(jié)點內(nèi)部的所有文字
console.log(window.getComputedStyle(p1,null));//查看所有屬性（非IE屬性）
console.log(p1.currentStyle);//查看所有屬性（IE屬性）
}
function getById(){ //取到元素節(jié)點的樣式屬性節(jié)點
var p1 = document.getElementById("p1").style;//獲取
p1.backgroundColor = "#FF00FF";
//行級樣式表權(quán)重1000;所有節(jié)點屬性循榆，一律駝峰命名法
//取到元素節(jié)點
var pDoc = document.getElementById("p1");
//獲取
pDoc.innerHTML = "<s>king_land</s>";//重置修改p中的HTML代碼
}
//——————————————分割線——————————————————
function getByName(){//通過Name取到一個數(shù)組，包含1到多個節(jié)點;
var p = document.getElementsByName("p1");
console.log(p.length);
//使用方式：通過循環(huán)墨坚，取到每一個節(jié)點秧饮，循環(huán)次數(shù)從0開始，<數(shù)組.length
for(var n = 0 ;n < p.length ; n++){
p[n].style.backgroundColor = "#FFFF00";
}
//p1.backgroundColor = "#FFFF00";
//p[0].style.backgroundColor = "#FFFF00";//★
}
//——————————————分割線——————————————————
//document.getElementsByTagName();//同Name
function getByTagName(){
var p = document.getElementsByTagName("p");
p[0].style.backgroundColor = "#00FF00";
}
//——————————————分割線——————————————————
//document.getElementsByClassName();//同Name
function getByClass(){
var p = document.getElementsByClassName("p1");
p[0].style.backgroundColor = "#00FFFF";
}
//——————————————分割線——————————————————
function getAttr () {
var img1 = document.getElementById("img1");
alert(img1.getAttribute("src"));
}//查看屬性節(jié)點 getAttribute("屬性名");
//——————————————分割線——————————————————
function setAttr () {
var img1 = document.getElementById("img1");
img1.setAttribute("src","../../2-CSS基礎(chǔ)語法/img/bg_flower_multi.gif");
img1.setAttribute("style","width: 100px;height: 100px;");
}//設(shè)置屬性節(jié)點 getAttribute("屬性名","屬性值");
//——————————————分割線——————————————————
//JS修改樣式總結(jié)
//1泽篮、.className：為元素設(shè)置一個新的class名字 例如：p1.className = "p2";
//2盗尸、.style：為元素設(shè)置新的樣式 例如：p1.style.background-color = "blue";
//3、.style.cssText：為元素同時修改多個樣式 例如：p1.style.cssText = "width:100px;height:200px;";
</script>
<style type="text/css">
.p1{
height: 100px;
width: 100px;
background-color: #000000;
color: #FFFFFF;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<p id="p1" name="p1" class="p1">
這里是測試區(qū)
</p>
<p id="p1" name="p1" class="p1">
這里是測試區(qū)
</p>
<p id="p1" name="p1" class="p1">
這里是測試區(qū)
</p>
<img src="../../2-CSS基礎(chǔ)語法/img/bg_flower_multi.gif" id="img1"/>
<br />
<button onclick="getById()">通過ID修改pcolor</button>
<br />
<button onclick="getByName()">通過Name修改pcolor</button>
<br />
<button onclick="getByTagName()">通過TagName修改pcolor</button>
<br />
<button onclick="getByClass()">通過ClassName修改pcolor</button>
<br />
<button onclick="getAttr()">取到img的src屬性值</button>
<br />
<button onclick="setAttr()">修改img的src屬性值</button>
</body>
</html>
- 層次節(jié)點常用操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function (){
//獲取層次節(jié)點的常用屬性
var ul1 = document.getElementById("ul1");
var lis = ul1.getElementsByTagName("li");
//只取到ul1中所有l(wèi)i
var lis = document.getElementsByTagName("li"); //取到頁面中所有的li
console.log(ul1.childNodes);//獲取元素的所有子節(jié)點（包含元素節(jié)點帽撑、文本節(jié)點）
console.log(ul1.firstChild);//獲取元素的第一個子節(jié)點
console.log(ul1.lastChild);//獲取元素的最后一個子節(jié)點
console.log(ul1.ownerDocument);//獲取當(dāng)前文檔根節(jié)點泼各，在html文檔中為document節(jié)點
console.log(ul1.parentNode);//獲取當(dāng)前節(jié)點的父節(jié)點
console.log(ul1.previousSibling);//獲取當(dāng)前節(jié)點的前一個兄弟節(jié)點
console.log(ul1.nextSibling);//獲取當(dāng)前節(jié)點的后一個兄弟節(jié)點
//上述屬性均會獲得所有的元素節(jié)點和文本節(jié)點，如果只需要元素節(jié)點亏拉，需要使用對應(yīng)Element屬性扣蜻，例如：firstChild→firstElementChild
console.log(ul1.attributes);//獲取當(dāng)前節(jié)點的所有屬性節(jié)點
}
//——————————————創(chuàng)建并新增節(jié)點——————————————————
//方法一：.creatElement("標(biāo)簽名")創(chuàng)建一個新節(jié)點，需要配setAttribute()方法設(shè)置屬性及塘；
//方法二：.appendChild(節(jié)點名)在元素的最后追加一個新節(jié)點
//方法三：.insertBefore(新節(jié)點名,目標(biāo)節(jié)點名)：將新節(jié)點插入到目標(biāo)節(jié)點之前
//方法四：克隆對象.cloneNode(true/false)：需要克隆誰莽使，就用誰去調(diào)用克隆節(jié)點；
//傳遞參數(shù)可以為true/false笙僚，true表示克隆當(dāng)前節(jié)點及子節(jié)點芳肌；
// false表示只克隆當(dāng)前節(jié)點，不克隆子節(jié)點。
function appendImg(){
//1亿笤、創(chuàng)建一個圖片節(jié)點
var img = document.createElement("img");
//2翎迁、給img節(jié)點設(shè)置屬性
img.setAttribute("src","../../1-HTML基本標(biāo)簽/ivicon.png");
//3、將設(shè)置好的img節(jié)點追加到body最后
document.body.appendChild(img)
//.setAttribute("src","../../img/2017-02-25_143342.png");
}
function insertImg(){
//1责嚷、創(chuàng)建一個圖片節(jié)點
var img = document.createElement("img");
//2鸳兽、給img節(jié)點設(shè)置屬性
img.setAttribute("src","../../1-HTML基本標(biāo)簽/ivicon.png");
//3、在兩個ul之間插入圖片
var ul2 = document.getElementById("ul2");
document.body.insertBefore(img,ul2);
}
var count = 2;
function copyUl(){
//1罕拂、取到ul2節(jié)點
var ul2 = document.getElementById("ul2");
//2揍异、克隆節(jié)點
var ul2Clon = ul2.cloneNode(true);
count ++;
ul2Clon.setAttribute("id","ul"+count)
//3、在原ul2節(jié)點之前爆班，插入新克隆節(jié)點
document.body.insertBefore(ul2Clon,ul2);
}
//——————————————刪除和替換節(jié)點——————————————————
//1衷掷、.removeChild(需刪除節(jié)點)：從父容器中刪除指定節(jié)點；
//2柿菩、.replaceChild(新節(jié)點戚嗅，被替換節(jié)點)：用新節(jié)點替換被指定節(jié)點，如果新節(jié)點為頁面中已有節(jié)點枢舶，會將此節(jié)點刪除后替換到指定節(jié)點懦胞。
function deleteUl1(){
//取到ul1
var ul1 = document.getElementById("ul1");
if (ul1){ //從父容器body中刪除ul1節(jié)點
document.body.removeChild(ul1);
}else{
alert("憋刪了，早沒了");
}
}
function ul1ReplaceUl2(){
var p = document.createElement("p");
p.setAttribute("style","width: 100px;height: 100px;background-color:#20B2AA;");
var ul2 = document.getElementById("ul2");
document.body.replaceChild(p,ul2);
}
</script>
<style type="text/css">
ul{
width: 600px;
list-style: none;
padding: 0;
background-color: #20B2AA;
display: flex;
justify-content: space-around;
margin-top: 20px;
}
</style>
</head>
<body>
<ul id="ul1">
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
<li>第四項</li>
</ul>
<ul id="ul2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
<li>第4項</li>
</ul>
<button onclick="appendImg()">在最后插入一幅圖片</button>
<button onclick="insertImg()">在兩個ul之間插入一幅圖片</button>
<button onclick="copyUl()">copy一個ul2</button>
<br />
<button onclick="deleteUl1()">刪除ul1</button>
<button onclick="ul1ReplaceUl2() ">用ul1替換ul2</button>
</body>
</html>
-
表格操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM操作表格</title>
<script type="text/javascript">
//表格對象：
//1凉泄、rows屬性：返回表格中的所有行躏尉，數(shù)組；
//2后众、insertRow(index)：在表格的第index+1行胀糜，插入一個新行；
//3蒂誉、deleteRow(index)：刪除表格的第index+1行教藻；
//表格的行對象：
//1、cells屬性：返回當(dāng)前行中的所有單元格右锨，數(shù)組括堤；
//2、rowIndex屬性：返回當(dāng)前行在表格中的索引順序陡蝇，從0開始痊臭；
//3、insertCell(index)：在當(dāng)前行的index+1處插入一個td登夫；
//4广匙、deleteCell(index)：刪除當(dāng)前行的第index+1個td；
//表格的單元格對象：
//1恼策、cellIndex屬性：返回單元格在該行的索引順序鸦致，從0開始潮剪；
//2、innerHTML屬性：設(shè)置或者返回當(dāng)前單元格中的HTMl代碼分唾；
//3抗碰、align（valign）屬性：設(shè)置當(dāng)前單元格的水平對齊方式；
//4绽乔、className屬性：設(shè)置單元格的class名稱弧蝇。
function newRow(){
var book = prompt("書名：");
var price = prompt("價格：");
var table = document.getElementsByTagName("table");
//在表格的最后一行插入一個新行
var newRow = table[0].insertRow(table[0].rows.length-1);
//給新行設(shè)置單元格
var cell0 = newRow.insertCell(0);
cell0.innerHTML = book;
var cell1 = newRow.insertCell(1);
cell1.innerHTML = price;
getSum();
}
function deleteRow(){
var table = document.getElementsByTagName("table");
if(table[0].rows.length>2){
table[0].deleteRow(table[0].rows.length-2);
}else{
alert("刪刪刪！刪你妹啊刪折砸！")
}
getSum();
}
function changeTitle(){
var color = prompt("請輸入6位十六進制顏色值：");
var table = document.getElementsByTagName("table");
table[0].rows[0].style = "background-color:#"+color;
}
function copyRow(){
var table = document.getElementsByTagName("table");
var copyRow = table[0].rows[table[0].rows.length-2].cloneNode(true);
var heJi = table[0].rows[table[0].rows.length-1];
//由于瀏覽器看疗，自動將表格的<tr>包裹在<tbody>中
//所以<tr>實際并非<table>的子節(jié)點，故需取到<table>中的<tbody>進行插入睦授；
if(table[0].rows.length>2){
table[0].getElementsByTagName("tbody")[0].insertBefore(copyRow,heJi);
}else{
alert("沒有可以復(fù)制的行");
}
getSum();
}
function getSum(){ //取到當(dāng)前表格 表格所有行
var table = document.getElementsByTagName("table");
var rows = table[0].rows;
if(rows.length<=2){
rows[rows.length-1].cells[1].innerText = 0 + "元";
alert("沒有可計算的行两芳！");
return;
} //求和
var sum = 0 ;
for(var i = 1 ; i <= rows.length-2 ; i++){//第0行與最后一行舍棄1 rows.length-2
var cells = rows[i].cells;//取到單元格
sum += parseFloat(cells[cells.length-1].innerText);
//最后一個單元格的 內(nèi)容（innerText） 轉(zhuǎn)化成數(shù)字并求和計算！
}
rows[rows.length-1].cells[cells.length-1].innerText = sum.toFixed(2) + "元";
}
window.onload = function(){
getSum();
}
</script>
<style type="text/css">
table{
border-collapse: collapse;
width: 400px;
text-align: center;
color: #585858;
}
td,th{
border: 1px solid #8B8A8B;
}
table tr:last-child{
color: #E70014;
}
</style>
</head>
<body>
<table>
<tr>
<th>書名</th>
<th>價格</th>
</tr>
<tr>
<td>看得見風(fēng)景的房間</td>
<td>30.00元</td>
</tr>
<tr>
<td>幸福從天而降</td>
<td>18.50元</td>
</tr>
<tr>
<td>60個瞬間</td>
<td>32.00元</td>
</tr>
<tr>
<td>合計</td>
<td></td>
</tr>
</table>
<br />
<button onclick="newRow()">增加一行</button>
<button onclick="deleteRow()">刪除最后一行</button>
<button onclick="changeTitle()">修改標(biāo)題樣式</button>
<button onclick="copyRow()">復(fù)制最后一行</button>
</body>
</html>
三去枷、JS中的事件
1.JS中的事件分類
- 鼠標(biāo)事件
click 單擊
dblclick 雙擊
mouseover 鼠標(biāo)移入
mouseout 鼠標(biāo)移出
mousemove 鼠標(biāo)劃過
mousedown 鼠標(biāo)按下
mouseup 鼠標(biāo)抬起
- 鍵盤事件
keydown：鍵盤按下時觸發(fā)
keypress：鍵盤按下并松開的瞬間觸發(fā)
keyup：鍵盤抬起時觸發(fā)
注意事項
①執(zhí)行順序：keydown keypress keyup
②長按時怖辆，會循環(huán)不斷的執(zhí)行keydown keypress
③有keydown事件，不一定有keyup事件（事件觸發(fā)過程中删顶，鼠標(biāo)移走竖螃，可能就沒有keyup）
④keypress事件只能捕獲字母、數(shù)字逗余、符號（包括回車和空格）斑鼻，不能捕獲功能鍵；keydown keyup基本可以捕獲所有功能鍵猎荠，特殊例外
⑤keypress區(qū)分大小寫，keydown keyup不區(qū)分蜀备；
⑥keypress不區(qū)分主鍵盤和小鍵盤关摇，keydown keyup區(qū)分；
如何確定鍵盤觸發(fā)按鍵
⑴ 在觸發(fā)函數(shù)中觸發(fā)參數(shù)e代表按鍵事件碾阁；
⑵ 通過e.keyCode 確認(rèn)案件Ascii碼值输虱，進而確定按鍵；
⑶ 兼容所有瀏覽器的寫法（一般不必要）：
var evn = e||event; //取到按鍵
var code = evn.keyCode||evn.which||evn.charCode; //取到按鍵編碼
- HTML事件
2.JS中的事件模型
DOM0事件模型
內(nèi)聯(lián)模型：直接將函數(shù)名作為HTML標(biāo)簽的某個事件屬性的屬性值脂凶；
栗子 <button onclick="func()"></button>
缺點：違反了W3C關(guān)于HTML與JS分離的基本原則宪睹！
腳本模型：在JS腳本中通過事件屬性進行綁定；
栗子 window.onload = function(){}
局限性：同一節(jié)點只能綁定一個同類型事件蚕钦；
DOM2事件模型（后面有栗子Ｍげ ）
優(yōu)點：同一節(jié)點，可以添加多個同類型事件的監(jiān)聽器嘶居；
①添加事件綁定：
IE10之前：btn1.attachEvent("onclick",函數(shù));
其他瀏覽器：btn1.addEventListener("click",函數(shù),true/false);
true：表示事件捕獲罪帖；false（默認(rèn)）：表示事件冒泡
兼容寫法：if(btn1.attackEvent){btn1.attachEvent("onclick",函數(shù));}else{btn1.addEventListener("click",函數(shù),true/false);}
②取消事件綁定：
.detachEvent("onclick",函數(shù)名);
.removeEventListener("click",函數(shù)名);
注：如果取消時間幫頂，回調(diào)函數(shù)必須使用有名函數(shù)，而不能使用匿名函數(shù)整袁。因為在取消事件幫頂時菠齿，需要傳入函數(shù)名；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>這里是栗子</title>
<script type="text/javascript">
window.onload = function (){
var btn1 = document.getElementById("btn1");
function func1(){
alert(1);
}
function func2(){
alert(2);
}
btn1.addEventListener("click",func1,false);
btn1.addEventListener("click",func2,false);
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function(){
btn1.removeEventListener("click",func1);
},false);
}
</script>
</head>
<body>
<button id="btn1">點我會彈窗坐昙！</button>
<br /><br />
<button id="btn2">點我不彈窗绳匀！</button>
</body>
</html>
3.JS中的事件流
- 事件冒泡
當(dāng)某DOM元素觸發(fā)某事件時，會從當(dāng)前DOM元素開始炸客，逐個觸發(fā)其祖先元素的同類型事件疾棵，直到DOM根節(jié)點；
DOM0事件流均為事件冒泡嚷量；
IE中使用.attachEvent()事件陋桂，均為冒泡；
其他瀏覽器.addEventListener()添加的事件蝶溶，當(dāng)?shù)谌齻€參數(shù)為false時嗜历，為冒泡。 - 事件捕獲
當(dāng)某DOM元素觸發(fā)某事件時抖所，會從DOM根節(jié)點梨州，逐個觸發(fā)其祖先元素的同類型事件，直到觸發(fā)到當(dāng)前DOM元素開始田轧；
只有使用.addEventListener()添加的事件暴匠，并且當(dāng)?shù)谌齻€參數(shù)為true時，才進行捕獲傻粘。 - 阻止事件冒泡
IE瀏覽器：將e.cancelBubble屬性設(shè)為true每窖；
其他瀏覽器：調(diào)用e.stopPropagation();方法 - 取消事件默認(rèn)行為
IE瀏覽器：將e.returnValue屬性設(shè)為false；
其他瀏覽器：調(diào)用e.preventDefault(); 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件流舉栗</title>
<style type="text/css">
#p1{
width: 200px;
height: 200px;
background-color: #20B2AA;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
}
#p2{
width: 100px;
height: 100px;
background-color: #436690;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
}
#p3{
width: 50px;
height: 50px;
background-color: #4E2E83;
color: #FFFFFF;
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<p id="p1">
<p id="p2">
<p id="p3">3</p>
2
</p>
1
</p>
<a href="../07 JS中的DOM/筆記.html" onclick="stopHref()">跳轉(zhuǎn)頁面</a>
</body>
<script type="text/javascript">
var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var p3 = document.getElementById("p3");
p1.addEventListener("click",function(e){
handleE();
console.log("p1觸發(fā)了click事件");
},false);
p2.addEventListener("click",function(e){
handleE();
console.log("p2觸發(fā)了click事件");
},false);
p3.addEventListener("click",function(e){
handleE();
console.log("p3觸發(fā)了click事件");
},false);
function handleE(e){
var evn = e||window.event;
evn.stopPropagation();
}
function stopHref(e){
e = e||window.event; if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
alert("好氣呀弦悉！");
}
</script>
</html>
