js事件委托和事件代理案例分享
更新時(shí)間：2017年07月25日 09:35:56 作者：diasa
這篇文章主要為大家分享了js事件委托和事件代理案例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
什么是事件委托/事件代理
利用事件的冒泡傳播機(jī)制（觸發(fā)當(dāng)前元素的某一個(gè)行為，它父級(jí)所有元素的相關(guān)行為都會(huì)被觸發(fā)），如果一個(gè)容器中有很多元素都要綁定點(diǎn)擊事件，我們沒有必要一個(gè)個(gè)的綁定了，只需要給最外層容器綁定一個(gè)點(diǎn)擊事件即可，在這個(gè)方法執(zhí)行的時(shí)候，通過(guò)事件源的區(qū)分來(lái)進(jìn)行不同的操作。
具體小案例如下：
<!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>購(gòu)物車</span>
<div id="mark" style='display:none'>
查看購(gòu)物車的詳細(xì)信息
</div>
</div>
<script>
var mark = document.getElementById('mark');
document.body.onclick = function(e){
e = e || window.event;
e.target = e.target || e.srcElement;
//如果點(diǎn)擊的是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，不進(jìn)行任何的操作
if(e.target.id==="mark"){
return;
}
mark.style.display === "none"
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案
這篇文章主要介紹了詳解用js代碼觸發(fā)dom事件的實(shí)現(xiàn)方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
javascript hashtable 修正版 hashtable hashset 下載,需要的朋友可以收藏下。2010-12-12
第一次接觸神奇的Bootstrap，Bootstrap提供了用戶友好、擴(kuò)瀏覽器的解決方案,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
基于JavaScript實(shí)現(xiàn)多級(jí)菜單效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)多級(jí)菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
webpack4.0+vue2.0利用批處理生成前端單頁(yè)或多頁(yè)應(yīng)用的方法
這篇文章主要介紹了webpack4.0+vue2.0利用批處理生成前端單頁(yè)或多頁(yè)應(yīng)用的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了關(guān)于js內(nèi)存泄露的一個(gè)好例子。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了Javascript面向切面編程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js實(shí)現(xiàn)同一頁(yè)面多個(gè)不同運(yùn)動(dòng)效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)同一頁(yè)面多個(gè)不同運(yùn)動(dòng)效果的方法,涉及javascript同時(shí)實(shí)現(xiàn)多個(gè)效果的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
JS實(shí)現(xiàn)table表格固定表頭且表頭隨橫向滾動(dòng)而滾動(dòng)
這篇文章主要介紹了JS實(shí)現(xiàn)table表格固定表頭且表頭可以隨橫向滾動(dòng)而滾動(dòng),需要的朋友可以參考下2017-10-10
淺析js實(shí)現(xiàn)網(wǎng)頁(yè)截圖的兩種方式
這篇文章主要介紹了淺析js實(shí)現(xiàn)網(wǎng)頁(yè)截圖的兩種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11