触发事件

在jQuery中，触发事件有3种方式，第1种是调用事件方法；第2种是通过trigger()方法触发事件，第3种是通过triggerHandler()方法触发事件。下面分别进行讲解。

1. 事件方法触发事件

jQuery中的事件方法在调用时如果传参数，表示绑定事件，如果不传参数，表示触发事件。以click()方法为例，示例代码如下。

 1  // 绑定事件
 2  $("div").click(function() {
 3   alert("hello");
 4  });
 5  // 触发事件
 6  $("div").click();

上述代码中，第6行代码调用了click()方法，触发了单击事件。

2. trigger()方法触发事件

使用trigger()方法可以触发指定事件，示例代码如下。

 1  // 绑定事件
 2  $("div").click(function() {
 3   alert("hello");
 4  });
 5  // 触发事件
 6  $("div").trigger("click");

上述代码中，第6行代码调用了trigger ()方法，参数click表示单击事件。

3. triggerHandler()方法触发事件

事件方法和trigger()方法在触发事件时，都会执行元素的默认行为，而triggerHandler()方法在触发事件时不会执行元素的默认行为。下面通过代码来演示。

 1  <input type="text">
 2  <script>
 3   $("input").on("focus", function() {
 4    $(this).val("你好吗");
 5   });
 6   $("input").triggerHandler("focus"); // 触发事件
 7  </script>

在上述代码中，第3~5行为页面中的input元素绑定焦点事件，第6行代码触发焦点事件。代码执行后，会发现input文本框没有光标闪烁，但第2行代码也执行了，文本框中的值变为“你好吗”。而如果将第6行的triggerHandler()方法换成focus()方法或者trigger()方法，则看到文本框中有光标闪烁。像这个文本框中有光标闪烁的现象，就是元素获得焦点时会发生的默认行为。由此可见，triggerHandler()方法不会执行元素的默认行为。