How to bind to all custom events in jQuery

Asked
Active3 hr before
Viewed126 times

8 Answers

eventscustom
90%

With regards to your upcoming edit, you can retrieve all bound events by accessing the object's data:,I know it's not possible to bind to all DOM events and I know you can bind to multiple events by supplying a space-separated list., 1 I'm giving you a +1 just for With regards to your upcoming edit... LOL :P – Matt Mar 16 '12 at 11:27 ,If I understood you correctly, you can iterate over the special events object to get a list of custom events (including those specified in the jQuery source code). Here's an ES5 example, you will need to adapt it yourself for older browsers or use a polyfill for Object.keys:

With regards to your upcoming edit, you can retrieve all bound events by accessing the object's data:

var boundEvents = $.data(document, 'events');
load more v
88%

Any string is legal for eventType; if the string is not the name of a native DOM event, then the handler is bound to a custom event. These events are never called by the browser, but may be triggered manually from other JavaScript code using .trigger() or .triggerHandler()., eventType Type: String A string containing one or more DOM event types, such as "click" or "submit," or custom event names. ,If eventData is present, it is the second argument to the .bind() method; if no additional data needs to be sent to the handler, then the callback is passed as the second and final argument., preventBubble Type: Boolean Setting the third argument to false will attach a function that prevents the default action from occurring and stops the event from bubbling. The default is true.

$("#foo").bind("click", function() {
   alert("User clicked on 'foo.'");
});
load more v
72%

We're all familiar with the basic events — click, mouseover, focus, blur, submit, etc. — that we can latch on to as a user interacts with the browser. Custom events open up a whole new world of event-driven programming.,With custom events, your code might look more like this:,Without custom events, you might write some code like this:,Let's make our example a little more interesting. We'll add another room to our house, along with a master switch, as shown here:

<div class="room" id="kitchen">
   <div class="lightbulb on"></div>
   <div class="switch"></div>
   <div class="switch"></div>
   <div class="clapper"></div>
</div>
load more v
65%

Let's look at the same functionality if implemented using jQuery custom events.,Now, the last part of the discussion is how to trigger custom events. Well, jQuery has a method called trigger .,Following code has been tested with jQuery 1.3 .,jQuery also allows developers to make use of custom events. How it is going to help us, we are going to see it shortly. First let's take a look at a basic calendar application.

1 $("a").bind("click", function() {
   2 alert("I have been clicked");
   3
});
load more v
75%

The function that you attach to the event is referred to as a callback or event handler. An instance of a jQuery.Event object is passed to the function as the first argument by default.,You can attach a callback to multiple events at once by providing the event names as space-separated items:,Now at some later point in our code, we can trigger the event thus:,You can also pass data to the event handler when it is bound to an event by passing the data as part of the jQuery.Event object. You do it like this:

$("#some-element").bind("click", function( /* jQuery.Event */ event) {
   doSomethingKickAss(event);
});
load more v
40%

Custom event means you can create your own events in jQuery. For example, create a custom event to fire an alert box on pressing any key on the keyboard.,How to bind jQuery events on elements generated through other events?,How to store and reproduce jQuery events?,How to create a custom jQuery Plugin?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $('textarea').bind("enterKey",function(e){
     alert("You have pressed Enter key!");
   });
   $('textarea').keyup(function(e){
     if(e.keyCode == 13)
     {
        $(this).trigger("enterKey");
     }
   });
});
</script>
</head>
<body>
<textarea rows="2" cols="20">  
</textarea>
</body>
</html>
22%

Our only problem: CustomEvent is not currently supported in Safari or Internet Explorer.,Handlers can now subscribe to “newMessage” events, e.g.,Handlers can now subscribe to “newMessage” events. The events are only raised if there’s a valid message:,In my previous article, How to Create Custom Events in JavaScript, we discussed the benefits of custom events and the native CustomEvent object. To recap, we can fire our own named events. The demonstation page provided a form which fired a “newMessage” event whenever a valid message was submitted. Any number of handlers can subscribe to this event to perform their own actions.

jQuery’s .trigger method is the key. You can trigger an event with a new type name and arbitrary data at any point, e.g.

$.event.trigger({
   type: "newMessage",
   message: "Hello World!",
   time: new Date()
});
load more v
60%

Edit: To clarify, I have created some custom widgets that respond to some custom events. For example, they all handle an event called 'stepReset' and resets their internal models.,With regards to your upcoming edit, you can retrieve all bound events by accessing the object's data:,But is it possible to bind to all custom events (preferably filtered by a wildcard pattern like 'abc*' or name-space)?,and in the Generic.xaml modified as @HighCore posted

With regards to your upcoming edit, you can retrieve all bound events by accessing the object's data:

var boundEvents = $.data(document, 'events');

For instance,

$.each(boundEvents, function() {
   if (this.indexOf("*")) // Checks each event name for an asterisk *
      alert(this);

   // alerts the namespace of the first handler bound to this event name
   alert(this[0].namespace);
});

If I understood you correctly, you can iterate over the special events object to get a list of custom events (including those specified in the jQuery source code). Here's an ES5 example, you will need to adapt it yourself for older browsers or use a polyfill for Object.keys:

var evts = Object.keys(jQuery.event.special).join(" ");
$("#myDiv").on(evts, function(e) {
   // your code here
});
load more v