Once again about delegation or how correctly to use the events

In this post I want to once again emphasize the mechanism of the work of delegation and the use of my own events to avoid mistakes that I had to face.

First, let's remember what delegation is by the following example:

<div id = "container">
<a href="" class=laedit"> Edit </a>
<a href="" class=undelete"> Delete </a>
</ div>
')
<script type = "text / javascript">
$ ('# container'). click (function (event) {
var elem = $ (event.target);

if (elem.hasClass ('edit')) {
console.info ('Clicked to edit link');
}
else if (elem.hasClass ('delete')) {
console.info ('Clicked to delete link');
}

return false;
});
</ script>


In the example there are two links, by clicking on which certain actions will be performed. In this case, this is editing and deleting the item. In order not to add the appropriate listeners to each of the links, you can simply add one listener for the container in which the links are located and then get the element with which the event was associated. Those. in this example, by clicking on one of the links, we will get the item on which the click was made and determine which of the links belongs to this event. Clicking on the 'Edit' link will display the message 'Clicked to edit link' in the console, and for the link 'Delete' - 'Clicked to delete link'.

Delegation very well improves the performance of the application, since you do not add a listener to each element, but only to the container. But my post is a bit not about that, I decided to remind you, so that the following description was clear.

In some cases, it may be necessary to use container structures with multiple attachments. For ease of understanding, let's create a structure with one container nesting:

<div id = "container">
<div id = "subcontainer"> </ div>
</ div>

In the project I'm working on, I needed to use my own events. Each container had its own event, but it was named the same for both. But without knowing it, I applied delegation to a structure with nested containers. For clarity, I brought everything in a small example, which we consider.

<div id = "container">
<div id = "subcontainer"> </ div>
</ div>

<script type = "text / javascript">
$ (document) .ready (function () {
$ ('# container'). bind ('some_event', function () {
console.info ('worked event for container');
});

$ ('# subcontainer'). bind ('some_event', function () {
console.info ('worked event for subcontainer');
});

$ ('# subcontainer'). trigger ('some_event');
});
</ script>

In this example, we simply add the listener to the parent container and monitor the 'some_event' event. Do the same for the 'subcontainer' nested container. If at the moment we call the trigger for the nested container, then in the console we will see:

worked event for container
worked event for subcontainer

To be honest, when I added in my project listeners for the same events, to a similar structure, I did not expect such a result. The events I called the same, but the current performed completely different actions. When the code is so small, then the error can be found immediately, and if it is all in classes of several 100 lines, then it’s not easy to track down the wrong code. To avoid performance errors, it is best to always use namespaces.

<script type = "text / javascript">
$ (document) .ready (function () {
$ ('# container'). bind ('some_event.container', function () {
console.info ('worked event for container');
});

$ ('# subcontainer'). bind ('some_event.subcontainer', function () {
console.info ('worked event for subcontainer');
});

$ ('# subcontainer'). trigger ('some_event.subcontainer');
});
</ script>

I hope this post will help to avoid errors in the code that I had to face when using my own events.