收藏
批改狀態(tài)：合格
老師批語：捕獲和冒泡都是以html為起點或終點,并非body
事件冒泡：
子元素嵌套在父元素內(nèi)部，點擊子元素的時候一定同時表示點擊了父元素，這個時候，先觸發(fā)子元素的事件處理器，然后再觸發(fā)父元素的事件處理器，如果父元素的父元素還有處理器，就一直向上觸發(fā)，一直到 html > document 元素。就像魚吐泡泡一樣，從水下向水面走，每向上走一層就會查看這一層有沒有事件處理器，如果有的話就會觸發(fā)，如果沒有的話就繼續(xù)向上尋找，直到頂層的html > document ，才結(jié)束尋找事件。
事件捕獲：
事件捕獲則和事件冒泡正好相反，點擊的時候從 window > document > html > body > 往下找，如果父級元素有事件處理器就先觸發(fā)父級元素的事件處理器，再向下一層，如果子級元素有的話就觸發(fā)子級元素的事件處理器，直到這個點擊位置的最底層，也就是我們通常所說的 target。事件捕獲就好像一塊石頭從水面向水下沉一樣，如果這一層有事件處理器，就觸發(fā)，沒有就繼續(xù)向下沉，到下層再查看是否有事件處理器，有的話就觸發(fā)，沒有的話繼續(xù)向下，一直到最底層，這個石頭就停止了。
理論說完了 我們測試下說個小案例吧。
HTML結(jié)構(gòu)
<div id="parent"> <div id="child" class="child"></div> </div>
下來js綁定冒泡事件
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被觸發(fā)，"+this.id);
})
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被觸發(fā)，"+this.id)
})
結(jié)果：
child事件被觸發(fā)，child
parent事件被觸發(fā)，parent
結(jié)論：先child，然后parent。事件的觸發(fā)順序自內(nèi)向外，這就是事件冒泡。
下來我們測試捕獲 現(xiàn)在改變第三個參數(shù)的值為true
document.getElementById("parent").addEventListener("click",function(e){
alert("parent事件被觸發(fā)，"+e.target.id);
},true)
document.getElementById("child").addEventListener("click",function(e){
alert("child事件被觸發(fā)，"+e.target.id)
},true)
結(jié)果：
parent事件被觸發(fā)，parent
child事件被觸發(fā)，child
結(jié)論：先parent,然后child。事件觸發(fā)順序變更為自外向內(nèi)，這就是事件捕獲。
捕獲實際中應用比較少~
===============一條樸素的分割線====================
通過事件冒泡做的留言本
來上代碼可以預覽哦。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>7.11 留言板-大灰狼</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{
background:#000000 url(https://inews.gtimg.com/newsapp_match/0/49787475/0) no-repeat;
background-size:100%; color:green; position: relative;}
.guestbook{width: 800px;
min-width: 800px;
font-family: "微軟雅黑";
font-weight: bold;
position: fixed;
left: 10%;
bottom: 15px;}
#list{list-style: none;}
#list li{background: skyblue;
opacity: 0.6;
border:1px solid slateblue;
border-radius: 5px;
min-heightheight: 30px;
margin: 10px 0;
padding: 5px;}
#list li button{float: right;
background:darkcyan;
color: #ffffff;
border: 0;
padding: 3px;
border-radius: 5px;
}
#name,
#message{border-radius: 8px; border: 0;line-height: 26px;margin: 10px; padding: 6px;}
#message{width: 300px;}
</style>
</head>
<body>
<div class="guestbook">
<div class="message-list">
<ul id="list">
</ul>
</div>
<div class="name">
<label for="name">您的稱呼：</label>
<input type="text" name="name" id="name" value="" />
</div>
<div class="ms">
<label for="message">發(fā)表留言：</label>
<input type="text" name="message" id="message" value="" placeholder="在這里輸入留言按回車即可！" autofocus/>
</div>
</div>
<script type="text/javascript">
//獲取消息框input輸入框
var message=document.getElementById("message");
//準備插入子元素的 留言列表
var list=document.getElementById("list");
//產(chǎn)生一個隨機數(shù)
var rnum=Math.round(Math.random()*10);
document.getElementById("name").value="游客"+rnum;
//給input輸入框添加事件監(jiān)聽 鍵盤事件 冒泡
message.addEventListener('keypress',addMessage,false);
//addMessage事件方法
function addMessage (ev) {
//事件方法中有一個默認的參數(shù) 就是事件對象：ev,evt,event 任選一個都一樣
//使用ev.key 可以獲取到 某一個按鍵的對應值
//發(fā)言昵稱
var names=document.getElementById("name").value;
//發(fā)言時間
var addtime=new Date().toLocaleString();
//console.log(ev.key);
//當按下回車進行操作 并且不等于空
if(ev.key==="Enter" && message.value!="" && names.value!=""){
//要把input插入到留言列表就先要把input的文本放到一個元素比如li
//所以要先創(chuàng)建li元素
var liTemp=document.createElement("li");
//創(chuàng)建的li是空的 給里面插入input輸入的文本
liTemp.innerHTML=names+' : '+message.value+ ' --發(fā)表于：' +addtime +" <button clss='del'>刪除</button>";
//留言數(shù)據(jù)已經(jīng)準備好了 來插入到留言列表里面吧
// list.appendChild(liTemp); //留言升序排列
//我們來做一個判斷 進行降序插入留言（最新留言在最上面）
if (list.childElementCount===0) {
//當ul列表子元素為0個直接插入
list.appendChild(liTemp);
} else{
//如果有留言插入到第一條留言前面
//insertBefore(a,b) 有2個參數(shù)a插入的元素 b插入的位置
//list.insertBefore(liTemp,list.firstElementChild); //將新發(fā)言從前面插入
list.appendChild(liTemp); //將消息從后面插入
}
//插入成功后 我們把輸入框清空 message.value=""
message.value=null;
}
}
//給留言列表的button刪除按鈕添加監(jiān)聽事件
list.addEventListener('click',messageDel);
//messageDel函數(shù)
function messageDel (ev) {
//currentTarget 事件屬性返回其監(jiān)聽器觸發(fā)事件的節(jié)點，即當前處理該事件的元素、文檔或窗口。
//是 ul。currentTarget是把事件添加給誰了
// var ul=ev.currentTarget;
//是li 。target正在觸發(fā)事件的元素
// var but=ev.target;
//判斷點擊的是button 還是li
if (event.target.nodeName=="BUTTON") {
//消息刪除彈窗詢問
if(confirm("是否確定要刪掉？")){
//當前正在出發(fā)事件的元素，正在被點擊的。
// 當前拿到的是button按鈕 我們要刪除li 是他的父節(jié)點
// console.log(ev.target);
// var li=but.parentElement;
// console.log(li)
//進行刪除
ev.currentTarget.removeChild(ev.target.parentElement);
}
}
}
</script>
</body>
</html>點擊 "運行實例" 按鈕查看在線實例
也可以通過以下網(wǎng)址 訪問小案例 源碼注解比較詳細
http://www.xdidc.com/test0711/7.11lyb.html
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
