jQuery中如何触发事件？【代码演示】

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

1.事件方法触发事件

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

//绑定事件
$("div").click(function() {
    alert("hello");
});
//触发事件
$("div").click();

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

2.trigger()方法触发事件

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

//绑定事件
$("div").click(function() {
    alert("hello");
});
//触发事件
$("div").trigger("click");

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

3.triggerHandler()方法触发事件

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

<input type="text">
<script>
  $("input").on("focus", function() {
    $（this).val("你好吗")；
  });
  $("input").triggerHandler("focus");   //触发事件
</script>

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