jQuery trigger() 方法用法详解

jQuery 的 trigger() 方法用于在指定的元素上触发事件。这个方法非常有用，当你需要模拟用户交互或在特定条件下自动触发事件时。以下是 trigger() 方法的详细用法：

  • selector: 选择器，用于选择要触发事件的元素。
  • eventType: 字符串，表示要触发的事件类型（例如 \”click\”, \”submit\”, \”mouseover\” 等）。

在这个例子中，当页面加载完成后，trigger(\”click\”) 会立即触发按钮的点击事件，弹出一个警告框。

在这个例子中，当页面加载完成后，trigger(\”myCustomEvent\”) 会立即触发 div 元素的自定义事件，弹出一个警告框。

你还可以向事件处理程序传递额外的参数。这些参数将作为事件对象的附加属性传递给事件处理程序。

在这个例子中，当页面加载完成后，trigger() 方法不仅触发了 customEventWithParams 事件，还传递了两个参数 param1 和 param2，并在事件处理程序中接收到这些参数。

  • trigger() 方法用于在指定元素上触发事件。
  • 可以触发内置事件（如 click, submit）或自定义事件。
  • 可以通过传递额外的参数来扩展事件对象。
  • 常用于模拟用户交互或在特定条件下自动触发事件。

jQuery基础回顾——事件冒泡、移除事件、模拟事件

  • 什么是冒泡

在页面上可以有多个事件，也可以多个元素响应同一个事件，假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同事<body>元素上也绑定了click事件，当单击内部<span>元素，即触发<span>元素的click事件，会输出3条记录，这就是由事件冒泡引起的。

示例代码

示例效果

在单击<span>元素的同时，也单击了包含<span>元素的元素<div>和包含<div>元素的<body>，并且每一个元素都会按照特定的顺序响应click事件。

  • 事件冒泡引发的问题

事件冒泡可能会引起意料之外的效果，上例中，本来只想触发<span>元素的click事件，然而<div>和<body>元素的click事件也同时被触发了，因此，有必要对事件的作用范围进行限制，当单击<span>时，只触发该元素的click事件，当单击<div>时，只触发<div>元素的click事件。

想要阻止事件冒泡，只需要在对应事件的响应函数里返回 false（ return false;） 即可。

在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件，假设网页上有一个<button>元素，使用以下代码为该元素绑定多个相同的事件。

当单击按钮后，会出现下图所示的效果

示意动画

1、移除按钮元素上以前注册的事件

首先在网页上添加一个移除事件的按钮。

然后为按钮绑定一个事件，jQuery代码如下：

下面来看看off()方法的语法结构：

events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如\”click\”, \”keydown.myPlugin\”, 或者 \”.myPlugin\”.

selector:一个最初传递到.on()事件处理程序附加的选择器。

fn:事件处理程序函数以前附加事件上，或特殊值false.

具体说明如下：

1) 如果没有参数，则删除所有绑定的事件。

2) 如果提供了事件类型作为参数，则只删除该类型的绑定事件。

3) 如果把在绑定时传递的处理函数作为第2/3个参数，则只有这个特定的事件处理函数会被删除。

2、移除<button>元素的其中一个事件

首先需要为这些匿名处理函数指定一个变量，例如下面的jQuery代码：

然后就可以单独删除某一个事件了，jQuery代码如下：

另外，对于只需要触发一次，随后就立即要解除绑定的情况，jQuery提供了一种简写法——one()方法，one()方法可以为元素绑定处理函数，当处理函数出发一次后立即被删除。其语法结构同on()方法类似，使用方法也相同。

  • 常用模拟

以上的例子都是用户必须通过单击按钮才能触发click事件，但是有时，需要通过模拟用户操作来达到单击的效果，例如在用户进入页面后，就触发click事件，而不需要用户主动单击。

在jQuery中，可以使用trigger()方法完成模拟操作，例如可以使用下面的代码来触发id为btn的按钮的click事件：

这样，当页面加载完毕后，就会立刻输出想要的效果，也可以直接用简化写法click()，来达到同样的效果。

  • 触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件，此时传入的参数名为自定义事件的名。

  • 传递数据

trigger(type,[data])方法有两个参数，第1个参数是要触发事件的类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递，通常可以通过传递一个参数给回调函数来区分这次事件是代码触发还是用户触发的：

示意

  • 执行默认操作

trigger()方法触发事件后，会执行浏览器默认操作。

以上代码不仅会触发<input>元素绑定的focus事件，也会使该元素本身得到焦点（这是浏览器的默认操作）。

如果只想触发绑定的focus事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。

该方法只会触发<input>元素上绑定的特定事件，同时取消浏览器对此事件的默认操作，即文本框只触发绑定的focus事件，而不会得到焦点。

若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！

关注并转发后私信“jQuery基础材料”获取线下资料，包括完整基础资料、chm文档、示例代码及其他参考资料。

上一节：

下一节：

jQuery 事件详解

  • jQuery 事件注册
  • jQuery 事件处理
  • jQuery 事件对象

语法：

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等

on() 方法在匹配元素上绑定一个或多个事件的事件处理函数

语法：

1. events:一个或多个用空格分隔的事件类型，如\”click\”或\”keydown\” 。

2. selector: 元素的子元素选择器 。

3. fn:回调函数 即绑定在元素身上的侦听函数。

on() 方法优势1：

可以绑定多个事件，多个处理事件处理程序。

on() 方法优势2：

可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。

on() 方法优势3：

动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件

off() 方法可以移除通过 on() 方法添加的事件处理程序。

如果有的事件只想触发一次， 可以使用 one() 来绑定事件。

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。

事件被触发，就会有事件对象的产生。

阻止默认行为：event.preventDefault() 或者 return false

阻止冒泡： event.stopPropagation()

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科