ドキュメント

Events/trigger

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

trigger( event, [data] )

Trigger an event on every matched element.

This will also cause the default action of the browser with the same name (if one exists) to be executed. For example, passing 'submit' to the trigger() function will also cause the browser to submit the form. This default action can be prevented by returning false from one of the functions bound to the event.

Triggered events aren't limited to browser-based events, you can also trigger custom events registered with bind.

The event handlers will receive a fixed (normalized) event object but it won't contain any of the browser-specific attributes (like keyCode, pageX, or pageY).

jQuery also supports namespaced events. These allow you to trigger or unbind specific groups of bound handlers without having to reference them directly. You can add an ! to the end of the event type in order to trigger only handlers that don't have a namespace specified.

New in jQuery 1.3:

All triggered events now bubble up the DOM tree. For example if you trigger an event on a paragraph then it will trigger on that element first, then on the parent element, and its parent, and so on up to the document. The event object will have a .target property equal to the original triggered element. You can prevent the bubbling by calling stopPropagation() or by returning false from your callback.

The event object constructor is now exposed and you can use it to create your own event object. The full list of properties that are available on the event object (passed to the triggered bound handlers) can be found in the jQuery.Event documentation.

You have 3 ways of specifying the event type:

  • You can pass the event name (type) which is a string
  • You can also use a jQuery.Event object. You can put data into this object and it will reach the triggered handlers.
  • Finally, you can pass a literal object with data. It will be copied to a real jQuery.Event object. Note that you must specify a type attribute in this case.
Arguments:
eventString,Event,Object
An event object or type to trigger.
data (Optional)Array
Additional data to pass as arguments (after the event object) to the event handler.
Examples:

Clicks to button #2 also trigger a click for button #1.

    $("button:first").click(function () {
      update($("span:first"));
    });
    $("button:last").click(function () {
      $("button:first").trigger('click');

      update($("span:last"));
    });

    function update(j) {
      var n = parseInt(j.text(), 10);
      j.text(n + 1);
    }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("button:first").click(function () {
      update($("span:first"));
    });
    $("button:last").click(function () {
      $("button:first").trigger('click');

      update($("span:last"));
    });

    function update(j) {
      var n = parseInt(j.text(), 10);
      j.text(n + 1);
    }

  });
  </script>
  <style>
  button { margin:10px; }
  div { color:blue; font-weight:bold; }
  span { color:red; }
  </style>
</head>
<body>
  <button>Button #1</button>
  <button>Button #2</button>
  <div><span>0</span> button #1 clicks.</div>
  <div><span>0</span> button #2 clicks.</div>
</body>
</html>

To submit the first form without using the submit() function, try:

$("form:first").trigger("submit")

To submit the first form without using the submit() function, try:

var event = jQuery.Event("submit");
$("form:first").trigger(event);
if ( event.isDefaultPrevented() ) {
  // Perform an action...
}

To pass arbitrary data to an event:

$("p").click( function (event, a, b) {
  // when a normal click fires, a and b are undefined
  // for a trigger like below a refers to "foo" and b refers to "bar"
} ).trigger("click", ["foo", "bar"]);

To pass arbitrary data through an event object:

var event = jQuery.Event("logged");
event.user = "foo";
event.pass = "bar";
$("body").trigger(event);

Alternate way to pass data through an event object:

$("body").trigger({
  type:"logged",
  user:"foo",
  pass:"bar"
});

NameType