📜  jQuery |触发器()方法(1)

📅  最后修改于: 2023-12-03 14:43:16.445000             🧑  作者: Mango

jQuery | 触发器()方法

jQuery中,事件触发器是让我们能够在元素上动态地触发绑定在该元素上的事件。通过使用trigger()方法,我们可以在元素上触发指定的事件,并执行绑定到该事件上的函数。

语法
$(selector).trigger(eventType [, extraParameters])
  • selector:要触发的元素选择器。
  • eventType:要触发的事件类型。
  • extraParameters:向事件处理程序传递的额外参数(可选)。
实例

下面是一个简单的示例,展示如何在元素上触发click事件。

$(document).ready(function(){
  $(".btn").click(function(){
    $(this).addClass("active");
  });
  $(".trigger-btn").click(function(){
    $(".btn").trigger("click");
  });
});

在上面的示例中,我们定义了一个click事件,当触发时,将向按钮添加active类。然后,我们定义了一个用于触发按钮点击事件的触发器按钮(.trigger-btn)。当单击该按钮时,使用trigger()方法触发click事件,从而使按钮具有激活状态类。

触发自定义事件

除了触发浏览器自带的事件,我们还可以使用trigger()方法来触发自定义事件。下面的示例展示如何定义和触发一个自定义事件。

$(document).ready(function(){
  $("#btn").on("customEvent", function(event, arg1, arg2){
      console.log(arg1 + " " + arg2); // 执行自定义事件
  });
  $("#trigger-btn").click(function(){
    $("#btn").trigger("customEvent", ["Hello", "World"]);
  });
});

在上面的示例中,我们定义了一个名为customEvent的自定义事件。执行自定义事件时,我们将向控制台记录一个带有两个参数的消息。然后,我们将触发一个监听器按钮(#trigger-btn),该监听器将使用trigger()方法触发customEvent事件,并传递消息参数。

总结

trigger()方法是一个强大的工具,可用于在元素上动态触发事件。通过结合自定义事件和事件触发器,我们可以轻松地创建功能强大的Web应用程序。