0

Интересует, возможно ли на javaScript создать свое событие, чтоб на него можно было поставить слушатель события.

Например есть два блока, как создать событие если кто-то кликнул на первый блок, это событие click_1, а если на второй блок, событие click_2.

Нужно, чтоб была возможность повесить на эти события обработчик, как на обычный клик:

$( "#target" ).click_1(function() {
  alert( "click_1" );
});

Пример разметки:

.block_1{
  width:300px;
  height:300px;
  background-color: aqua;
}

.block_2{
  width:300px;
  height:300px;
  background-color: chartreuse;
}
<div class="block_1"> 1 </div>
<div class="block_2"> 2 </div>

Как такое реализовать на js?

2 ответа 2

7

Благодаря методам 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/

2
  • 1
    стоит еще добавить про namespace у событий
    – Grundy
    5 авг 2016 в 6:37
  • @Grundy спасибо за предложение. Внес исправления.
    – qodunpob
    5 авг 2016 в 7:03
3

На чистом JS смотрите Создание и вызов событий:

var click1 = new Event('click_1')
  ,click2 = new Event('click_2')
  ,b1 = document.getElementById('block_1')
  ,b2 = document.getElementById('block_2')
;

// слушать события
b1.addEventListener('click_1', function (e) { console.log("Clicked 1"); }, false);
b2.addEventListener('click_2', function (e) { console.log("Clicked 2"); }, false);

// вызвать события
b2.dispatchEvent(click2);
#block_1,#block_2{width: 50px;height: 50px;margin: 10px;text-align: center;float: left;cursor: pointer;}#block_1{background-color: aqua}#block_2{background-color: chartreuse}
<div id="block_1">1</div>
<div id="block_2">2</div>

При этом стандартное событие клика остаётся, и если хотите вызывать созданные события по клику, надо ловить клик, и из его обработчика делать dispatchEvent(ваше нестандартное событие)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.