jquery教程-trigger()和triggerHandler()的区别

“triggerHandler()”具有类似于trigger()的功能！“triggerHandler()”的描述方法与trigger()几乎相同，但它的特点是不执行标准的浏览器事件行为。

要了解此功能我们来看一下以下简单示例：

<body>
<input type="checkbox">
<input type="checkbox">
<button>按钮</button>
 
<script>
    $('input').click(function() {
        console.log('点击功能');
    })
    $('button').click(function() {
        $('input').trigger('click');
    })
</script>
</body>

在此示例中，排列了两个复选框和按钮元素。当您单击复选框时，您已将事件处理设置为将“单击”输出到控制台日志。

jquery教程-trigger()和triggerHandler()的区别第1张

当点击按钮元素时，会执行“trigger('click')”，所以执行checkbox的事件处理。单击按钮，它将如下所示！

jquery教程-trigger()和triggerHandler()的区别第2张

trigger() 被执行，控制台日志的输出被检查两次，并且复选框被选中。

<body>
<input type="checkbox">
<input type="checkbox">
<button>按钮</button>
 
<script>
    $('input').click(function() {
        console.log('点击功能');
    })
    $('button').click(function() {
        $('input').triggerHandler('click');
    })
</script>
</body>

在此示例中，我只是将 trigger() 更改为 triggerHandler()。单击按钮，它将如下所示！

jquery教程-trigger()和triggerHandler()的区别第3张

有两点与上一点不同。首先是复选框未选中！这意味着不执行标准浏览器事件行为。由于不执行表单提交处理，因此只执行简单的事件处理。

其次日志只打印一次！也就是说，“triggerHandler()”具有在处理第一个匹配事件时结束的特性。

可以看到，“trigger()与triggerHandler()”在细节上有着非常不同的特性！

当改变不起作用时该怎么办

经常会出现在jQuery事件处理中使用“change()”时效果不佳的现象。例如，让我们看一下在输入框中输入内容时执行“change()”事件的情况！

<body>
<input type="Text">
<button>按钮</button>
 
<script>
    $('button').click(function() {
        $('input').val('示例');
    })
 
    $('input').change(function() {
        console.log('已经输入');
    })
</script>
</body>

在这个例子中，已经放置了一个输入框和按钮元素。当点击按钮时，字符串“示例”显示在输入框中。因此当使用“change()”输入某些内容时，它被设置为将字符串“input”输出到控制台日志。

但实际上没有任何内容打印到控制台日志中。因为change()不会对通过val()的输入做出反应！但是可以使用 trigger() 轻松解决此问题。请参阅下面的示例！

<body>
<input type="Text">
<button>按钮</button>
 
<script>
    $('button').click(function() {
        $('input').val('示例').trigger('change');
    })
 
    $('input').change(function() {
        console.log('已输入');
    })
</script>
</body>

需要注意的是点击按钮时事件处理的内容！描述已更改为“val('示例').trigger('change')”，其中之前使用了“val()”。

换句话说，在使用 val() 输入字符串后，trigger() 会故意执行 change() 事件！

通过这种方式编写，可以强制不响应 val() 的事件响应。

本文来源：词雅网

本文地址：https://www.ciyawang.com/jquery-82.html

本文使用「署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 」许可协议授权，转载或使用请署名并注明出处。