Listening to events

The browser triggers many events. But here are some of the most common event types and event names:

1. mouse events (MouseEvent): mousedown, mouseup, click, dblclick, mousemove, mouseover, mousewheel, mouseout, contextmenu
2. touch events (TouchEvent): touchstart, touchmove, touchend, touchcancel
3. keyboard events (KeyboardEvent): keydown, keypress, keyup form events: focus, blur, change, submit
4. window events: scroll, resize, hashchange, load, unload

In jQuery, you can listen to events using many event listeners. Some of them are:

1. click(function(event) {}),
2. mouseenter(function(event) {}),
3. keyup(function(event) {}) and so on.

The equivalents in JavaScript are :

1. addEventListener(“click”, (event) ⇒ {}),
2. addEventListener(“mouseenter”, (event) ⇒ {}),
3. addEventListener(“keyup”, (event) ⇒ {}) and so on.

Simply use the addEventListener listener and call the event appropriately.

Refer to the following code snippet to learn how to listen to events through jQuery and vanilla JavaScript: // Listen to events using jQuery $(".signout-button").click(function(event) { // Logout user }); $(".delete-account-form").mouseenter(function(event) { // Higlight the delete account form }); $(".password").keyup(function(event) { // Start checking the password strength });

// Listen to events using vanilla JavaScript document.querySelector(".signout-button").addEventListener("click", (event) => { // Logout user }); document.querySelector(".delete-account-form").addEventListener("mouseenter", (event) => { // Higlight the delete account form }); document.querySelector(".password").addEventListener("keyup", (event) => { // Start checking the password strength }); ```