Благодаря методам trigger
и triggerHandler
(triggerHandler
можно условно назвать урезанной версией trigger
) вы можете генерировать стандартные и кастомные события
http://api.jquery.com/trigger/
http://api.jquery.com/triggerHandler/
Вы также можете группировать общие события (события одного компонента например), используя namespace https://api.jquery.com/event.namespace/
$element.on('event.namespace', function (e) {
...
});
...
$element.trigger('event.namespace');
Однако в вашем примере на самом деле лучше подписываться на события конкретного элемента:
$('.block_1').on('click', function () {
alert('Block 1');
});
$('.block_2').on('click', function () {
alert('Block 2');
});
.block_1 {
width:300px;
height:300px;
background-color: aqua;
}
.block_2 {
width:300px;
height:300px;
background-color: chartreuse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block_1">1</div>
<div class="block_2">2</div>
Можно даже воспользоваться единым обработчиком:
$('.js-block').on('click', function () {
alert('Block ' + $(this).data('blockNum'));
});
.block_1 {
width:300px;
height:300px;
background-color: aqua;
}
.block_2 {
width:300px;
height:300px;
background-color: chartreuse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block_1 js-block" data-block-num="1">1</div>
<div class="block_2 js-block" data-block-num="2">2</div>
А делегирование позволит отлавливать события динамически создаваемых элементов:
var $body = $('body'),
addBlock = (function () {
var $lastBlock = $('.js-block').last(),
className = ['block_2', 'block_1'],
counter = 0 || $lastBlock.data('blockNum');
return function () {
var $block = $('<div/>');
counter++;
$block.data('blockNum', counter);
$block.addClass(className[counter % 2]).addClass('js-block').text(counter);
$body.append($block);
};
})();
$body.on('click', '.js-block', function () {
alert('Block ' + $(this).data('blockNum'));
addBlock();
});
.block_1 {
width:300px;
height:300px;
background-color: aqua;
}
.block_2 {
width:300px;
height:300px;
background-color: chartreuse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block_1 js-block" data-block-num="1">1</div>
<div class="block_2 js-block" data-block-num="2">2</div>
Но если вам все же нужно ловить глобально генерируемые события (только не делайте этого в условиях данного примера - это будет не очень хорошим тоном), воспользуйтесь паттерном "Медиатор". Его простую реализацию для jquery можно найти здесь https://github.com/cowboy/jquery-tiny-pubsub
/*! Tiny Pub/Sub - v0.7.0 - 2013-01-29
* https://github.com/cowboy/jquery-tiny-pubsub
* Copyright (c) 2013 "Cowboy" Ben Alman; Licensed MIT */
(function($) {
var o = $({});
$.subscribe = function() {
o.on.apply(o, arguments);
};
$.unsubscribe = function() {
o.off.apply(o, arguments);
};
$.publish = function() {
o.trigger.apply(o, arguments);
};
}(jQuery));
$('.js-block').on('click', function() {
$.publish('click_' + $(this).data('blockNum'));
});
$.subscribe('click_1', function() {
alert('Block 1');
});
$.subscribe('click_2', function() {
alert('Block 2');
});
.block_1 {
width: 300px;
height: 300px;
background-color: aqua;
}
.block_2 {
width: 300px;
height: 300px;
background-color: chartreuse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block_1 js-block" data-block-num="1">1</div>
<div class="block_2 js-block" data-block-num="2">2</div>
Советую подробнее прочитать про паттерны проектирования http://largescalejs.ru/