jQuery Handling Events with on() method

Jquery Course

- Event delegation
- Register Events to run Only Once
- Remove Events

Handling Events

The jQuery .on() method responds to any event on the selected elements.
Syntax:

element.on('event_name', function(eventObject){
  //your code...
});

- event_name - the name of the event (click, hover, change, input, etc..).
- eventObject - object with clicked element. Apply: console.table(eventObject) in the event function to see in browser's console a table with the properties of this object.

Example: When click on the Divs with class 'ev_cls' it will show an alert box with the div content.

<div class='ev_cls'>What appears and disappears is not real.</div>
<div class='ev_cls'>Forgiveness is the real cure.</div>
<script>
$('.ev_cls').on('click', function(ev){
  alert($(this).html());
});
</script>

Demo, click on each text.

Multiple events and handlers

The .on() method accepts an object containing multiple events and handlers. So, you can register multiple events to a selector in the same .on().

$('div').on({
  mouseenter: function(){
    console.log('hovered over a div');
  },
  mouseleave: function(){
    console.log('mouse left a div');
  },
  click: function(){
    console.log('clicked on a div');
  }
});

Passing data to the event handler

You can pass an object with your own data to the event object. Your object will be stored in the eventObject.data property.

$('div').on('click', {prop:'value'}, function(ev){
    console.log('event data:'+ ev.data.prop +' (should be "value")');
});

Event delegation

Event delegation allows us to attach a single event listener, to a parent element, that will emit for all descendants matching a selector, whether those descendants exist now or are added in the future.
Lets see this example:

<ul id='list'>
<li>Item #1</li>
<li>Item #2</li>
</ul>

<script>
//when click on the LI in #list, alert clicked LI content
$('#list li').on('click', function(ev){
  alert($(this).html());
});

//automatically append another LI in #list
$('#list').append('<li>Appended Item #3</li>');
</script>

In the above code, when a LI in our #list group is clicked, it shows an alert with its content.
While this works perfectly fine, there are drawbacks. When we add a new LI in that #list, if we click our newly added item (Appended Item #3), nothing would happen, because we registered a direct event on "#list li". Direct event works to elements at the time the .on() method is called.

- Demo, click on the following Items: In this case, to can have the event registered to the newly added items, we use event delegation.
We move the child part ('li') from the selector to the second parameter position of the .on() method.

<script>
//when click on #list, alert its clicked LI content, even newly LI
$('#list').on('click', 'li', function(ev){
  alert($(this).html());
});

//automatically append another LI in #list
$('#list').append('<li>Appended Item #3</li>');
</script>

We have now attached a single click event listener to our #list that will listen for clicks on its descendant LI, even newly added LI; because "event delegation" allows us to attach an event listener for elements that exist now or in the future.

- Demo: now, if you click on the third Item, the click event will work.

Register Events to run Only Once

If you want a particular event-handler to run only once, you may use the .one() method.
- Example: when a #ex_btn button is clicked, the click event is emitted the first time only.

<button id='ex_btn'>Click</button>

<script>
$('#ex_btn').one('click', function(ev){
  alert('Next clik will not be emitted');
});
</script>

Demo:

Remove Events

If you want to remove a registered event, you may use the .off() method.
- Example: after the #c2_btn is clicked two times, the 'click' event is removed.

<button id='c2_btn'>Click</button>

<script>
var c2_nrc =0;
$('#c2_btn').on('click', function(ev){
  c2_nrc++;
  $(this).text('Clicks: '+ c2_nrc);

  if(c2_nrc ==2) $('#c2_btn').off('click'); //removes the click
});
</script>

Demo, click two times on the following button. Then, the third click will not be emitted:

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>

#id {
  overflow: auto;
}

document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}

if(isset($_GET["id"])) {
  echo $_GET["id"];
}