Java语言-103：jQuery对象-事件冒泡

最新推荐文章于 2024-06-24 16:41:03 发布

空空的城

最新推荐文章于 2024-06-24 16:41:03 发布

阅读量163

点赞数

本文链接：https://blog.csdn.net/qq_41833394/article/details/80910868

版权

1、事件冒泡：从内（子）到外（父）叫冒泡

2、事件捕获：从外（父）到内（子）叫捕获

时间冒泡简单举例：

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>jQuery事件冒泡</title>
<script type="text/javascript" src="../jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
//如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
//格式： .toggle(function, function, … )
$("#show").toggle(function(){
//slideDown([speed],[easing],[fn])：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
// 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
$("#txt").slideDown(3000);}
,function(){
//hide([speed,[easing],[fn]])：隐藏显示的元素这个就是
// 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。
$("#txt").hide(3000);
});
//click([[data],fn])：触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。
//jQuery代码示例（触发页面内所有段落的点击事件）：$("p").click();
//jQuery代码示例（将页面内所有段落点击后隐藏。）：$("p").click( function () { $(this).hide(); });
$("#parent").click(function(e){
console.log("parent clicked");
$("#show").css({"color":"red"})
console.log(e)
});

$("#children").click(function(e){
console.log("children clicked");
console.log(e)
$("#show").css({"color":"blue"})
e.stopPropagation();
});
})
</script>
</head>
<body>

<p id="show" style="cursor: pointer;">查看文章</p>

<p id="txt" style="display: none;">这就是你要看的哦</p>

<div id="parent" style="width: 600px; height: 600px;border:solid 1px red;">

<div id="children" style="width: 200px;height: 200px;
border:solid 1px blue;margin: 200px;">
</div>
</div>
</body>
</html>