JS基础——事件操作总结
程序员文章站
2024-01-18 16:04:58
通用事件绑定 function bindEvent(elem,type,fn) { elem.addEventListener(type,fn); } let a =document.getElementById('a'); bindEvent(a,'click',function(e){ e.pr ......
通用事件绑定
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);
}
});
}