关于信息订阅的理解
来源：2-3 静静的显示和隐藏（2）
小姜同学666
2020-02-11 21:30:47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示隐藏模块</title>
<link rel="stylesheet" href="../css/base.css" />
<style>
body {
width: 400px;
margin: 0 auto;
}
.btn {
width: 50%;
height: 30px;
}
#box {
width: 100%;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<button id="btn-show" class="btn">显示</button><button id="btn-hide" class="btn">隐藏</button>
<div id="box">
</div>
<script src="../js/jquery.js"></script>
<script>
var slient = {
// 发布信息（定义一个方法）
showBox : function(elem){
// 方法中定义事件，由订阅者决定事件中完成什么操作
elem.trigger('beforeshow');
elem.show();
elem.trigger('aftershow');
}
}
// 订阅信息（触发方法中的事件，并决定事件中的操作）
//下面一行有个问题，是因为点击按钮中给方法传入的参数elem=$('#box'),所以下面用的是$('#box').on()吗？
//所以下面的订阅信息和点击按钮的事件是属于团队中某一个人的需求对么，这两段代码属于一块的？
$('#box').on('beforeshow aftershow',function(event){
if(event.type === 'beforeshow'){
$('#box').html('我被触发了');
}
})
// 点击按钮
$('#btn-show').on('click',function(){
slient.showBox($('#box'));
})
</script>
</body>
</html>
问题在代码注释中，请老师解答！感谢！
1回答
-
同学你好， 对于你的问题解答如下：
方法定义事件，订阅者决定事件中完成的操作是： 哪个元素触发该事件，什么时候触发该事件。
以同学的这段代码为例，就是在点击按钮的时候，让#box这个盒子触发方法中定义的事件。
是因为点击按钮中给方法传入的参数elem=$('#box'),所以使用$('#box').on()。
（1）$('#box').on()这是jQuery提供的语法，通过on()方法绑定给当前选定的jQuery对象中的元素绑定事件。
（2）在点击按钮事件中传递参数$('#box')，触发该元素的事件。
是的，两段代码是一块的，需要先使用on绑定事件，然后才可以通过trigger方法,决定何时何处触发。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题