Event.js is a javascript event tool that can be used in your front-end applications. It uses the traditonal onEvent methods of HTML elements but gives you the same benefits you get from using the modern addEventListener method and even more features.
Removes the main downside of using the traditional DOM events, i.e you can add as many event listeners as you want just like using the addEventListener method
Easy manipulations on targeted elements.
Chainable.
Event.js has all the features of the addEventListener method.
Event.js is supported in many browsers (modern browsers + old browsers).
Use to set object(s) for event manipulations.
var divs = document.getElementsByTagName("div"); var events = new EventListener();// Returns EventListenerObject. events.targ(divs) //or do this events.$(divs)
Use to add event listeners.
events.targ(divs).on("mouseover",function(eventObject,targetElements){ // "this" refers to the element among the targeted elements that is focused or hovered. this.style.color="red"; console.log(this===eventObject.target);// true // Also take advantage of the `each` method of the targetElements parameter // It iterates over all the targeted elements and performs the function passed as argument to it. targetElements.each(function(){ // Note: "this" here is not the same as the "this" above. console.log(this); }); },"my optional identifier for the anonymous function")/* chainable */ .on("mouseout",function(eventObject, targetElements){ // "this" refers to the element among the targeted elements that is blured. this.style.color="blue"; console.log(this===eventObject.target);// true }) /* Add another mouseover listener */ .on("mouseover",function(eventObject, targetElements){ console.log(eventObject);// Mouse Event Data });//Chaining ends here but event.js is not ended yet. // Add another mouseover listener events.targ(divs).on("mouseover",function(eventObject, targetElements){ console.log(eventObject);// Mouse Event Data console.log(targetElements);// An array of the Targeted Elements with the each method attached to the array. });
Use to remove all event listeners/handlers of the event name specified.
// Removes all mouseover listeners/handlers of the first and second Div elements. events.targ([divs[0],divs[1]]).removeAllListeners("mouseover");
Use to set how many times an event listener/handler will be called.
// Sets the mouseover listeners to be called once. events.targ(divs).eventCount("mouseover",1);// Results: // Listeners are executed when a targeted element is hovered for the first time // and do not get executed afterwards when hovered again.
Use to remove an event listener/handler of the specified event name.
var button = document.getElementById("button"); // Removing listener by identifier events.targ(button).on("click",function(e,ech){ //... },"buttonClickedListener1").on("click",function(e,ech){ //... },"buttonClickedListener2").removeListener("click","buttonClickedListener1"); // If the button is clicked, only the second listener gets executed. // Removing listener by reference function buttonIsClicked(eventObject,targetElements){ //do stuff.. }; events.targ(button).on("click",buttonIsClicked).on("click",function(e,ech){ //... },"buttonClickedListener2").removeListener("click",buttonIsClicked); // If the button is clicked, the buttonIsClicked listner does not get executed.
Use to remove all listening events of the object(s) specified.
/* Let's go back to the divs examples above */ // Removes all listening events of the targeted elements events.targ(divs).removeTargetEvents(); // Removes all listening events of the element(s) passed as argument to the removeTargetEvents method. events.targ(divs).removeTargetEvents(button); `Note: If you choose to use event.js, do not use the onEvent properties of the HTML elements. Use event.js throughout for all that you will use the onEvent properties of the HTML elements
-
Notifications
You must be signed in to change notification settings - Fork 0
Use the onEvent methods of HTML elements just like using addEventListener. Attach unlimited event listeners to elements.
License
KBismark/eventjs
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
About
Use the onEvent methods of HTML elements just like using addEventListener. Attach unlimited event listeners to elements.
Topics
Resources
License
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published