溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關js如何實現事件委托和事件代理的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
什么是事件委托/事件代理
利用事件的冒泡傳播機制（觸發當前元素的某一個行為，它父級所有元素的相關行為都會被觸發），如果一個容器中有很多元素都要綁定點擊事件，我們沒有必要一個個的綁定了，只需要給最外層容器綁定一個點擊事件即可，在這個方法執行的時候，通過事件源的區分來進行不同的操作。
具體小案例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
}
html,body{
width:100%;
height:100%;
overflow:hidden;
}
#box{
position:absolute;
left:50%;
top:50px;
width:100px;
height:30px;
margin-left:-50px;
line-height:30px;
text-align:center;
border:1px solid #2489cc;
}
#mark{
position:absolute;
top:30px;
left:-1px;
width:300px;
height:100px;
line-height:100px;
text-align:center;
background:#ffe470;
border:1px solid #2489cc;
}
</style>
</head>
<body>
<div id='box'>
<span>購物車</span>
<div id="mark" style='display:none'>
查看購物車的詳細信息
</div>
</div>
<script>
var mark = document.getElementById('mark');
document.body.onclick = function(e){
e = e || window.event;
e.target = e.target || e.srcElement;
//如果點擊的是box或者是#box下的span，我們判斷mark是否顯示，顯示讓其隱藏，反之讓其顯示
if(e.target.id==="box" || (e.target.tagName.toLowerCase()==="span" && e.target.parentNode.id==='box')){
if(mark.style.display === "none"){
mark.style.display === "block"
}else{
mark.style.display === "none"
}
return;
}
//如果事件源是#mark，不進行任何的操作
if(e.target.id==="mark"){
return;
}
mark.style.display === "none"
}
</script>
</body>
</html>感謝各位的閱讀！關于“js如何實現事件委托和事件代理”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
