JS基礎——事件操作總結
阿新 • • 發佈:2018-06-22
mat tel asc null on() pre 綁定 cal sel
通用事件綁定
function bindEvent(elem,type,fn) { elem.addEventListener(type,fn); } let a =document.getElementById(‘a‘); bindEvent(a,‘click‘,function(e){ e.preventDefault() //阻止瀏覽器默認行為,防止調轉 alert(‘clicked’); })
事件冒泡
<body> <div> <p id ="p1">激活</p> <p id ="p2">取消</p> <p id ="p3">取消</p> </div> <div> <p id ="p4">取消</p> <p id ="p5">取消</p> </div> </body>
let body =document.body let p1 =document.getElementById(‘p1‘); bindEvent(p1,‘click‘,function(e){ e.stopPropagation(); //阻止事件冒泡 alert(‘激活‘) }) bindEvent(body,‘click‘,function(e){ alert(‘取消‘) })
事件代理
<body> <div id="div1"> <p id ="p1">激活</p> <p id ="p2">取消</p> <p id ="p3">確認</p> </div> </body>
let body =document.body let div1 =document.getElementById(‘div1‘); bindEvent(div1,‘click‘,function(e){ const target =e.target; if(target.nodeName === ‘A‘) { //判斷是否是a標簽 alert(‘target.innerHTML‘) } })
事件綁定函數(完善)
function bindEvent(elem,type,selector,fn) { if(fn == null){ fn = selector; selector = null; } elem.addEventListener(type,function(e){ if(selector){ const target= e.target if(target.matches(seletor)){ fn.call(target, e) } }else { fn(e); } }); }
JS基礎——事件操作總結