Event Listener

Adding Click event

$('.button').click(function(e){
//perform action here
 this.width(500);
});

//(optionaly) passing other options to controll bubbles  
$('.button').click(function(e){
//perform action here
},{...});

Alternatively you can use the .on() method

The on method receives any valid javascript event name, a callback function and optionaly, a config object

$('.button').on('click',function(e){
//perform action here
});

$('.button').on('mouseleave',function(e){
//perform action here
});

$('.button').on('submit',function(e){
//perform action here
});

$('.button').on('keypress',function(e){
//perform action here
});

//etc...

Still loves addEventListener and onclick, ...?

You can still use them as well.

$('.button').addEventListener('click',(e)=>{
//perform action here
});

$('.button').onclick = function(e){
//perform action here
};

---

onEnter

Triggers a callback function when the Enter key is pressed inside an input field.

onEnterKey(callback, options)

Parameters:

• callback: A function to execute when Enter is pressed.

• options: (Optional) Additional event listener options.

Usage:

$('#inputField').onEnterKey(function(e){
    console.log('Enter key is pressed!');
});

---

hover

hover(onEnter, onLeave)

Adds hover event listeners to an element.

Parameters:

• onEnter: Function to execute when hovering over the element.

• onLeave: Function to execute when leaving the element.

Usage:

$('#button').hover(
    () => console.log('Hovered in!'),
    () => console.log('Hovered out!')
);