I wonder if it is possible to create my own event in javaScript so that you can put an event listener on it.

For example, there are two blocks, how to create an event if someone clicked on the first block, this is the click_1 event, and if on the second block, the click_2 event.

It is necessary that there be an opportunity to hang up a handler on these events, as on a normal click:

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

Markup example:

 .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>

How to implement this on js ?

    2 answers 2

    Thanks to the trigger and triggerHandler ( triggerHandler can be called a triggerHandler version of the trigger ) you can generate standard and custom events http://api.jquery.com/trigger/ http://api.jquery.com/triggerHandler/

    You can also group general events (events of one component for example) using the namespace https://api.jquery.com/event.namespace/

     $element.on('event.namespace', function (e) { ... }); ... $element.trigger('event.namespace');

    However, in your example, it is actually better to subscribe to events of a specific element:

     $('.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>

    You can even use a single handler:

     $('.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>

    And delegation will allow to catch events of dynamically created elements:

     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>

    But if you still need to catch globally generated events (just do not do it in the conditions of this example - this will not be a very good tone), use the “Mediator” pattern. Its simple implementation for jquery can be found here 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>

    I advise you to read more about the design patterns http://largescalejs.ru/

    • one
      worth adding about the namespace of the events - Grundy
    • @Grundy thanks for the offer. Made corrections. - Konstantin Basharkevich

    On pure JS, see Creating and recalling events :

     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>

    At the same time, the standard click event remains, and if you want to trigger the created events by clicking, you need to catch the click, and from its handler make dispatchEvent(ваше нестандартное событие)