YouTipEvent Trigger
## jQuery trigger() Method
The `trigger()` method triggers the specified event and the default behavior of that event (such as form submission) on the selected elements.
This method is commonly used to programmatically simulate user interactions, such as clicking a button, submitting a form, or triggering custom events.
---
## Syntax
```javascript
$(selector).trigger(event, [param1, param2, ...])
```
### Parameter Values
| Parameter | Type | Description |
| :--- | :--- | :--- |
| `event` | *String / jQuery.Event* | **Required.** Specifies the event to trigger on the selected element. This can be a standard browser event (e.g., `"click"`, `"focus"`, `"submit"`) or a custom event. |
| `param1, param2, ...` | *Array / Object* | **Optional.** Additional parameters to pass along to the event handler. This is particularly useful for custom events. |
---
## trigger() vs. triggerHandler()
jQuery also provides a similar method called `triggerHandler()`. However, there are key differences between them:
* **Default Behavior:** `trigger()` triggers both the event handlers and the browser's default behavior (e.g., focusing an input, submitting a form). `triggerHandler()` does **not** trigger the browser's default behavior.
* **Matched Elements:** `trigger()` operates on all elements matched by the jQuery selector. `triggerHandler()` only affects the **first** matched element.
* **Event Bubbling:** Events triggered by `trigger()` bubble up the DOM tree. Events created by `triggerHandler()` do not bubble.
* **Chaining:** `trigger()` returns the jQuery object (allowing method chaining). `triggerHandler()` returns whatever value was returned by the last handler it executed, or `undefined` if no handler was executed.
---
## Code Examples
### Example 1: Triggering a Standard Event
The following example triggers the `select` event on an `` element when a button is clicked:
```javascript
$("button").click(function() {
$("input").trigger("select");
});
```
### Example 2: Comparing trigger() and triggerHandler()
This example demonstrates how `trigger()` and `triggerHandler()` behave differently when triggering the `focus` event:
```javascript
// Using trigger() - This will focus the input and run the event handler
$("#old").click(function() {
$("input").trigger("focus");
});
// Using triggerHandler() - This runs the event handler but does NOT focus the input
$("#new").click(function() {
$("input").triggerHandler("focus");
});
// Event handler for the input focus event
$("input").focus(function() {
$("Focused!").appendTo("body").fadeOut(1000);
});
```
### Example 3: Passing Custom Parameters to Event Handlers
You can pass custom data to your event handlers using an array of parameters:
```javascript
// Bind a custom event with parameters
$("p").on("myCustomEvent", function(event, param1, param2) {
alert(param1 + " " + param2);
});
// Trigger the custom event and pass arguments
$("button").click(function() {
$("p").trigger("myCustomEvent", ["Hello", "World!"]);
});
```
---
## Important Considerations
### Triggering Default Link Behavior
By default, triggering a `"click"` event on an `` (anchor) element using `.trigger("click")` will execute any bound click handlers, but it **will not** cause the browser to navigate to the link's `href`.
If you want to programmatically navigate to a URL when an event is triggered, you should handle the redirection explicitly in your event handler:
```javascript
$('#myLink').on('click', function(event) {
// Prevent default behavior if needed
event.preventDefault();
// Programmatically redirect
window.location.href = 'https://www.wikipedia.org';
});
// Triggering this will now successfully redirect the page
$('#myLink').trigger('click');
```