- 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.
What appears and disappears is not real.
Forgiveness is the real cure.

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:
The .one() method accepts the same arguments as .on(); it supports multiple events to one or multiple handlers, passing custom data and event delegation.

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:

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
jQuery Handling Events with on() method

Last accessed pages

  1. Add, Change, and Remove Attributes with jQuery (35994)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (8337)
  3. Read Excel file data in PHP - PhpExcelReader (56662)
  4. Drag and Drop with HTML5 attributes (3959)
  5. Using slideDown and SlideUp (1521)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (399)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (317)
  3. Register and show online users and visitors (292)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (276)
  5. Insert, Select and Update NULL value in MySQL (182)