ES5事件冒泡&代理

事件

题目

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

知识点

通用事件绑定
事件冒泡
代理 (即委托,也是事件冒泡的应用)
//通用事件绑定
var btn = document.getElementById('btn1')
btn.addEventListener('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()//阻止默认行为
	alert('clicked')
})
关于IE低版本的兼容性
  • IE低版本使用attachEvent绑定事件,和W3C标准不一样(不使用addEventListener)
  • IE低版本使用量已非常少,很多网站都早已不支持
  • 建议对IE低版本的兼容性,了解即可,无需深究
  • 如果遇到对IE低版本要求苛刻的面试,果断放弃
    安卓兼容性
<body>
	<div id="div1">
		<p id="p1">激活</p>//点击p1时,事件冒泡
		//会沿着DOM树向上事件冒泡
		//先到div1,再冒到body
		//会一直触发DOM树上的事件
		//这种情况下需要阻止冒泡
		<p id="p2">取消</p>
		<p id="p3">取消</p>
	</div>
	<div id="div2">
		<p id="p4">取消</p>
		<p id="p5">取消</p>
		<p id="p6">取消</p>
	</div>
</body>
function bindEvent(elem,type,fn){
	elem.addEventListener(type,fn)
}
//事件冒泡
var p1 = document.getElementById('p1')
var body = document.body
bindEvent(p1,'click',function(e){
	e.stopPropatation()//用于阻止冒泡
	alert('激活')
})
bindEvent(body,'click',function(e){
	alert('取消')//这个是利用了事件冒泡
})
代理

事件冒泡具体应用

<!--怎么给所有a标签添加事件,点击弹出a标签内容-->
<div id="div1">
	<a href="#">a1</a>
	<a href="#">a2</a>
	<a href="#">a3</a>
	<a href="#">a4</a>
	<!--会随时新增更多 a 标签-->
</div>
//代理
var div1 = document.getElementById('div1')
div1.addEventListener('click',function(e){
	var target = e.target
	//target告诉你事件是在哪里触发的
	//e.target 在这里就是 a 对象
	if(target.nodeName === 'A'){
		alert(target.innerHTML)
	}
})

完善通用绑定事件的函数

//是否使用代理
function bindEvent(elem,type,selector,fn){
	if(fn = 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)
			//call用于改变this指向
			//如果直接fn(e)this是window吗
		}else{
			//不是事件代理
			fn(e)
		}
	})
}
//使用代理
var div1 = ducoment.getElementById('div1')
bindEvent(div1,'click','a',function(e){
	alert(this.innnerHTML)
})
//不使用代理
var a = document.getElementById('a1')
bindEvent(a,'click',function(){
	alert(a.innerHTML)
})
代理的好处
  • 代码简洁
  • 减少浏览器内存占用

解答

编写一个通用额事件监听函数
描述事件冒泡的流程
  • DOM树形结构
  • 事件冒泡
  • 阻止冒泡
  • 冒泡应用
对于一个无限下拉加载图片的页面,如何给每个图片绑定事件
  • 使用代理
  • 知道代理的两个优点

重点总结

通用事件绑定
事件冒泡
代理
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值