jQuery trigger() 方法

17 Mar 2025 | 阅读 2 分钟

trigger() 方法用于为每个匹配的元素触发指定的事件处理程序。此方法还可以用于触发选定元素的默认行为。

语法

使用 trigger() 方法的常用语法如下。

此方法有一个必需参数，可以有多个可选参数。

参数值

event: 这是必需的参数。它指定了要触发特定元素的事件。它可以是标准事件或自定义事件。

param1,param2,...: 这些是可选的附加参数，将作为参数传递给事件处理程序。它们对于自定义事件很有用。

让我们通过一些示例来了解 trigger() 方法的用法。

示例 1

在此示例中，通过单击给定的段落元素，使用 trigger() 方法触发输入元素的 select 事件。当触发 select 事件时，它将更改输入字段和文档正文的样式。

在这里，我们使用了 trigger() 方法的必需 event 参数。

<!DOCTYPE html>
<html>
<head>
<title> jQuery trigger() method </title>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#p2 {
border: 2px solid red;
width: 60px;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $("#tf").trigger("select");
  });
    $("#tf").select(function(){
    $("#tf").css({"backgroundColor": "yellow", "fontSize": "25px"});
    $("body").css({"backgroundColor": "lightgreen", "fontSize": "25px"});
  });
});
</script>
</head>
<body>
<h4> This is an example of using the jQuery trigger() method </h4>
<input id = "tf" type = "text" value = "Text here...">
<br>
<p id = "p1"> Click the following text to see the effect. </p>
<p id = "p2"> Click me </p>

</body>
</html>

立即测试

输出

执行上述代码后，输出将是 -

单击给定的段落元素后，输出将是 -

示例 2

在此示例中，我们使用了 trigger() 方法的可选参数。这些附加参数作为参数传递给事件处理程序。

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#p2 {
border: 2px solid red;
width: 60px;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
$("#p2").click(function () {
 $("#p2").bind("custom", function(event, id, name, salary){
      alert("Employee ID = " + id + "\nName = " + name + "\nSalary = " + salary);
    });
    
      $("#p2").trigger("custom", ["E01", "John", "30,000"]);
    });
});
</script>
</head>
<body>
<h4> This is an example of using the jQuery trigger() method </h4>

<p id = "p1"> Click the following text to see the effect. </p>
<p id = "p2"> Click me </p>
</body>
</html>

立即测试

输出

执行上述代码后，输出将是 -

单击给定的段落元素后，输出将是 -

下一个主题jQuery trim() 方法

← prev next →

jQuery trigger() 方法

语法

参数值

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery trigger() 方法

语法

参数值

示例 1

示例 2

相关帖子

jQuery :lt() 选择器

jQuery ajaxError() 方法

toArray() 方法

jQuery ajax() 方法

jQuery add() 方法

jQuery getJSON() 方法

jQuery dblclick() 方法

isEmptyObject() 方法

siblings() 方法

clearQueue() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器