事件绑定-冒泡-代理

最新推荐文章于 2022-06-19 13:44:45 发布

boy964089798

最新推荐文章于 2022-06-19 13:44:45 发布

阅读量75

点赞数

本文链接：https://blog.csdn.net/chen964089/article/details/115067713

版权

事件绑定

var btn = document.getElementById('submit')
btn.addEventListener('click',event=>{
	console.log('点击按钮')
})
//通用事件绑定
function bindEvent(el,type,fn){
	el.addEventListener(type,fn)
}
const btn = document.getElementById('btn')
bindEvent(btn'click',e=>{
	e.preventDefault()
	console.log(e.target)
})

事件冒泡

<body>
	<div id='div1'>
		<p id='p1'>激活</p>
		<p id='p2'>取消</p>
		<p id='p2'>取消</p>

	</div>
</body>
const p1 = document.getElementById('p1')
const body = document.body
bindEvent(p1,'click',e=>{
	//e.stopPropagation()	//阻止事件冒泡
	console.log('激活')
})
bindEvent(body,'click',e=>{
	console.log('body click')
	console.log(e.target)	//因为冒泡机制，点击p或div标签都会触发body的click事件
})

事件代理


const box= document.getElementById('box')
bindEvent(box,'click',event=>{
	event.preventDefault()
	const target = event.target
	if(target.nodename==='a'){
		alert(target.innerHTML)
	}
}

)

boy964089798

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件绑定-冒泡-代理

事件绑定var btn = document.getElementById('submit')btn.addEventListener('click',event=>{ console.log('点击按钮')})事件代理const box= document.getElementById('box')bindEvent(box,'click',event=>{ event.preventDefault() const target = event.target if(tar
复制链接

扫一扫