Skip to main content

JS Event Bubbling Vs Event Capturing.

In Javascript or HTML DOM to be precise, there are two methods of event propagation, those are:

  1. Event Capturing.
  2. Event Bubbling.
This defines the way event flow in case of multiple event listeners.
Suppose you have a img  element inside a div element then and both have an event listener defined, then whose event listener should be called first?

  1. In case of event bubbling, the inner most elements event listener will be called first and it would be propagated out. So first the event listener of img will be called followed by the event listener of div element.
  2. In case of event capturing, the outer most elements event listener is called first followed by inner elements. So, in above example,
    div's event listener would be called first followed by inner most element that is img's event listener.
The event propagation method can be selected by passing third optional boolean argument to addEventListener method of JS. The syntax is:
addEventListner(event,event_handler,usecapture)
The default value is false, hence, by default event bubbling is supported.

How to do this in JQuery?

You can't do this in Jquery. Jquery does not support this as not all browser support this method. And the goal of Jquery is cross-browser JS framework.
Browser older then IE8 and Opera 7.0 does not support event capturing method.

Popular posts from this blog

Watch Live cam on Google!!!!!

Ahhh!!! type certain string in google search bar above and it would bring up the network live cam into your browser. These can be anything from CCTV or webcams... There are lots of string.. i suggest a few down below use them to begin with.. And do come up with your own.. and leave a comment to the post... And ya.. if u come up with something interesting then don forget to share it.. Strings::: Axis cameras: "adding live video to one of your own pages a very easy task with an AXIS 2100 Network Camera" ' google ' intile:"Live view - / - AXIS" ' google ' "Your browser has JavaScript turned off.For the user interface to work effectively" ' google ' inurl:indexFrame.html axis ' google ' "Live web imaging unleashed" ' google ' MOBOTIX cameras: (intext:"MOBOTIX M1" | intext:"MOBOTIX M10") intext:"Open Menu" Shift-Reload ' google ' JVC cameras: "(c)copyright 199...

Problems with mysql.sock

Sometimes while working on Linux, mysql.sock may get deleted by mistake due to some softwares.. in such cases any access to mysql wont be possible as the sock file defines the socket connection for mysql. It will give an error of the following type: ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2) In such cases follow these steps to reconfigure mysql: Delete the log files with the names: ib_logfile0, ib_logfile1 and ibdata1 in the /var/lib/mysql directory Then type: "mysqld_safe --user=mysql &" This will automatically create mysql.sock file and even the new logs files. This is a very simple solution which I used recently and decided to share with you people.

Breaking open https://web.whatsapp.com/

Today whatsapp have launched an online/web version of their overly popular smartphone messaging app. I was very much interested in seeing the architecture of this app because as far as i knew, they never stored messages on their server but all the data was only stored in users phone. So I started to look under the hood of the webapp and what I saw was a beauty. First let me list down the frameworks they have used in creating this app: React .js : A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES from Facebook. Underscore.js  : Unerscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?” … and the tie to go along with jQuery's tux and Backbone's suspenders. Velocity.js : Velocity is an animation engine with the same API as jQuery's $.animate(...