首页 > Web开发 > 详细

JS基础——事件操作总结

时间:2018-06-21 23:23:41      阅读:255      评论:0      收藏:0      [点我收藏+]

通用事件绑定

 
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基础——事件操作总结

原文:https://www.cnblogs.com/fuGuy/p/9211214.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!