知识点:
#通用事件绑定
var btn = document.getElementById('btn1');
btn.addEventListner('click',function(event){
console.log('clicked');
})
function bindEvent(elem,type,fn){
elem.addEventListener(type,fn);
}
var a = document.getElementById('link1');
bindEvent(a,'click',function(e){
e.preventDefault();//阻止默认行为,对于a标签,阻止它跳转
alert('clicked');
})
#IE低版本兼容性
IE低版本使用attachEvent绑定事件,和W3C便准不一样
IE低版本使用量很少,很多网站都已经不支持
这部分了解即可,无需深究
#事件冒泡
<body>
<div id = 'div1'>
<p id='p1'>激活</p>
<p id='p2'>取消</p>
<p id='p3'>取消</p>
<p id='p4'>取消</p>
</div>
<div id = 'div2'>
<p id='p5'>取消</p>
<p id='p6'>取消</p>
</div>
</body>
需求:点击p1提示激活,点击别的取消段落提示取消;
事件冒泡是从下级往父级冒,先显示子节点的绑定事件,再不断往父级寻找绑定事件;
所以这里可以给p1绑定激活函数,然后给body绑定取消函数,这里就符合了所有取消的功能,但是激活按钮会在
提示激活之后又冒泡到body提示取消,所以要阻止冒泡方法stopPropatation();
var p1 = document.getElementById('p1');
var body = document.body;
bindEvent(p1,'click',function(e){
e.stopPropatation();
alert('激活');
})
bindEvent(body,'click',function(e){
alert('取消');
})
#代理
对于一个节点内子节点数量不确定,随时可能增加的情况,用代理的方法给所有子节点绑定事件;
给父级绑定事件,用target寻找触发节点;
如:
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
</div>
var div1 = document.getElementById("div1");
div1.addEventListener('click',function(e){
var target = e.target; //target返回的是触发该事件的节点
if(target.nodeName === 'A'){
alert(target.innerHTML);
}
})
代理的有点:
1、代码简洁,不用对每个节点都绑定事件
2、给浏览器的压力小
#完善绑定事件函数
完善后的绑定事件,多了一个selector参数来给代理使用
function bindEvent(elem,type,selector,fn){
if(fn == null){ //这一块判读针对没有用到代理的情况,第三个参数传进来的会是function,所以把第三个参数赋值给fn,把selector赋值为null
fn = selector;
selector = null;
}
elem.addEventListener(type,function(e){
var target;
if(selector){ //如果有代理
target = e.target;
if(target.matches(selector)){//判断触发节点是否为需要的节点
fn.call(target,e)
}
}
else{
fn(e);
}
})
}
有代理的情况使用this,就可以用call把触发事件的节点传进来;
var div1 = document.getElementById('div1');
bindEvent(div1,'click','a',function(e){
console.log(this.innerHTML);
})