【JS面试】第八章 事件

版权声明：本文为冯天祥原创文章，未经允许不得转载。 https://blog.csdn.net/kxbk100/article/details/88599337

题目
编写一个通用的事件监听函数
描述事件冒泡过程
对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

知识点
通用事件绑定
var btn=document.getElementById(‘btn1’)
btn.addEventListener(‘click’,function(){
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不一样
事件冒泡
e.stopPropatation()//阻止冒泡
代理
通过事件冒泡机制，在元素的上层增加事件绑定机制
var div1=document.getElementById(‘div1’);
div1.addEventListener(‘click’,function(e){
var target=e.target;
if(target.nodeName===‘A’){
alert(target.innerHTML)
}
})

function bindEvent(elem,type,selector,fn){
if(fnnull){
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)
}
}
})
}
bindEvent(a,‘click’,‘a’,function(e){
console.log(this.innerHTML)
})
bindEvent(a,‘click’,function(e){
console.log(this.innerHTML)
})
好处：代码简洁，减少浏览器内存占用
解答
function bindEvent(elem,type,selector,fn){
if(fnnull){
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)
}
}
})
}

DOM树形结构——》事件冒泡——》组织冒泡——》冒泡的应用（代理）

使用代理。