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');
	}
});