Jquery学习笔记——自定义事件

作用：

为了在模块之间解耦合(地球人都知道！)

基本结构

被触发端： obj.bind('自定义事件名称','传入的数据',处理函数)

触发端： 触发对象.click( function(event) {

找到被触发端对象.trigger(‘自定义事件名称’,'传递的数据')

如：

$(document).bind('myCustomEvent', { foo : 'bar' }, function(e, arg1, arg2) {
console.log(e.data.foo); // 'bar'
console.log(arg1); // 'bim'
console.log(arg2); // 'baz'
});

$(document).trigger('myCustomEvent', [ 'bim', 'baz' ]);

});

一个简单实例： 有两间屋子，每个屋子有各自的插座和灯泡，还有一个统一的开关。要求如下：每个房子内的插座和开关能关闭自己屋内的灯泡，master_switch能进行灯泡的统一打开和关闭。

<div class="room" id="kitchen">
<div class="lightbulb on"></div>
<div class="switch"></div>
<div class="switch"></div>
<div class="clapper"></div>
</div>
<div class="room" id="bedroom">
<div class="lightbulb on"></div>
<div class="switch"></div>
<div class="switch"></div>
<div class="clapper"></div>
</div>
<div id="master_switch"></div>

$('.lightbulb').bind('changeState', function(e) {
var $light = $(this);
if ($light.hasClass('on')) {
$light.trigger('turnOff');
} else {
$light.trigger('turnOn');
}
}).bind('turnOn', function(e) {
$(this).removeClass('off').addClass('on');
}).bind('turnOff', function(e) {
$(this).removeClass('off').addClass('on');
});

$('.switch, .clapper').click(function() {
$(this).parent().find('.lightbulb').trigger('changeState');
});

$('#master_switch').click(function() {
if ($('.lightbulb.on').length) {
$('.lightbulb').trigger('turnOff');
} else {
$('.lightbulb').trigger('turnOn');
}
});