在jQuery中,on方法可以为元素绑定事件,trigger方法可以手动触发事件,围绕这2个方法,我们来体验jQuery中的观察者模式(Observer Pattern)。
■ on方法绑定内置事件,自然触发
比如,我们给页面的body元素绑定一个click事件,这样写。
复制代码 代码如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="https://www.jb51.net/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').on('click', function () {
console.log('被点击了~~');
});
});
</script>
</head>
<body>
<h1>hello</h1>
</body>
以上,我们只有点击body,才能触发click事件。也就是说,当给页面元素绑定内置事件后,事件的触发是在内置事件发生的那刻。
■ on方法绑定内置事件,手动触发
使用trigger方法,也可以手动触发元素绑定的内置事件。
<script src="https://www.jb51.net/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').on('click', function () {
console.log('被点击了~~');
});
$('body').trigger('click');
});
</script>
以上,无需点击body,在页面加载完毕,body自动触发了click事件。
■ on方法绑定自定义事件,手动触发
我们知道,click是jquery内置的事件,那么,是否可以自定义事件,并手动触发呢?
复制代码 代码如下:
<script src="https://www.jb51.net/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('body').on('someclick', function () {
console.log('被点击了~~');
});
$('body').trigger('someclick');
});
</script>
以上,我们自定义了一个someclick事件,得到的结果和上面一样。
于是,我们发现:我们可以为元素绑定自定义事件,并且用trigger方法触发该事件。
当然,自定义事件的名称可以按照"命名空间.自定义事件名称"的形式来写,比如app.someclick,这在大型项目中尤其有用,这样可以有效避免自定义事件名称冲突。
如果从"发布订阅"这个角度来看,on方法相当于订阅者、观察者,trigger方法相当于发布者。
■ 从"异步获取json数据"来体验jQuery观察者模式
在根目录下,有一个data.json的文件。
{
"one" : "Hello",
"two" : "World"
}
现在,通过异步的方式来获取json数据。
复制代码 代码如下:
<script src="https://www.jb51.net/Scripts/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON('data.json', function(data) {
console.log(data);
});
});
</script>
如果用一个全局变量来接收异步获取的json数据。
复制代码 代码如下: