js中的事件处理模型 - 事件冒泡，捕获

最新推荐文章于 2024-07-03 17:28:24 发布

shyyly

最新推荐文章于 2024-07-03 17:28:24 发布

阅读量128

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/shyyyl/article/details/107609674

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

事件冒泡
A结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
事件捕获
A 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素。（自顶向下）
B IE没有事件捕获
触发顺序：先捕获，后冒泡
focus, blur, change, submit, reset, select等事件没有冒泡
取消冒泡
A: w3c标准event.stopPropagation()但不支持ie9一下
B： IE独有event.cancelBubble = true

function stopBulle(event){
if(event.stopPropagation){
event.stopPropagation()
}else{
event.cancelBubble = true
}
}

阻止默认事件
A: return false
B： event.preventDefault() w3c标准ie 9一下不兼容
C： event.returnValue = false
事件委托

<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
<script>
var ul = doucment.getElementByTagName('ul')[0]
ul.onclick = function(e){
var event = e||window.event
var target = event.target || event.srcElement
console.log(target.innerText)
}
</script>

shyyly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中的事件处理模型 - 事件冒泡，捕获

事件冒泡A结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）事件捕获A 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素。（自顶向下）B IE没有事件捕获触发顺序：先捕获，后冒泡focus, blur, change, submit, reset, select等事件没有冒泡取消冒泡A: w3c标准event.stopPropagation()但不支持ie9一下B： IE独有event.can.
复制链接

扫一扫

专栏目录