【jQuery教程】trigger()方法操作总结

这次我们来学习一下trigger()，它可以用jQuery手动执行事件处理。

什么是trigger()

让我们先从有关 trigger() 方法的基础知识说起！trigger()方法触发被选元素上指定的事件以及事件的默认行为。

一般事件处理是使用这样的 on() 方法：

//光标与任意要素重叠时执行事件处理
$('div').on('mouseenter', function() { })
 
//点击按钮后执行事件处理
$('button').on('click', function() { })

在某些用户动作发生后执行事件处理，例如“当光标重叠时……”或“当单击时……”。但是，通过使用trigger()可以轻松实现“更改样式并执行事件就像同时单击一样”等复杂处理。

此外也可以通过重叠鼠标来执行点击，或者通过简单地滚动屏幕来执行表单提交。在本文中，我们将从基础到应用技术详细解释trigger()！

基本用法

从这里开始，让我们了解实际使用 trigger() 方法的编程技术！作为一般的描述方法，可以指定要执行的事件名称作为参数：

<body>
<input type="text">
 
<script>
    $('input').on('mouseenter', function() {
 
        $(this).trigger('focus');
 
    })
</script>
</body>

在此示例中，放置了使用 input 元素创建的输入框。通常，点击这个输入框会给它“焦点”并允许用户输入，对吧？

但是当鼠标光标与输入框重叠时，此示例使用 mouseenter 执行 trigger()。通过写“trigger('focus')”，它是有意聚焦的。

也就是说，在本示例中，您只需将鼠标光标悬停在输入框上即可进行输入。

这样一来，trigger()可以说是一大特点，它可以有意识地执行一个与平时不同的事件。

【jQuery教程】trigger()方法操作总结

尝试点击事件

现在我们使用实际编程中经常使用的“点击事件”创建一个示例！和以前一样，可以通过编写“trigger('click')”来有意执行点击事件。

在此基础上让我们来实现例如：当按下键盘上的任何“键”时，都会执行 click 事件！

<body>
<button>按钮</button>
 
<script>
    $('body').on('keydown', function(e) {
        if(e.keyCode === 32) {
 
            $('button').trigger('click');
 
        }
    })
 
 
    $('button').on('click',function(){
         console.log('hogehoge');
    })
</script>
</body>

在此示例中放置了一个按钮。当按下键盘上的“空格”时，我使用“keydown”执行 trigger()。因此，按下“空格键”将具有与单击按钮相同的效果。

传递数据

trigger() 有一个函数可以让你在事件发生时传递任意数据，如果将数据指定给第二个参数：

$('button').on('mouseenter', function() {
 
    $(this).trigger('click', ['触发事件']);
 
})

在此示例中，当鼠标光标悬停在按钮元素上时将执行 trigger()。在trigger()中指定点击事件，在数组data中设置字符串“触发事件”。

这样写，在执行 trigger() 时，会在触发 click 事件时传递数组数据。要接收此字符串如下：

$('button').click( function( e, data ) {
 
    console.log( data + '中单击');
 
})

执行结果

触发事件中单击

这是在按钮元素上执行点击事件的描述。之前不是指定trigger()执行的时候触发click事件吗？这意味着将执行上述事件。

因此，trigger()设置的字符串“触发事件”存储在点击事件描述的函数的第二个参数“数据”中。

关于自定义事件

trigger() 的另一个特性是您可以运行自己的自定义事件！分配任意事件名称并将所需的处理组合为一个是很常见的。让我们看一个简单的例子！

<body>
<button>按钮</button>
 
<script>
	//创建自定义事件
    $(document).on('newevent', function() {
        console.log('已执行自定义事件');
    })
 
 
    $('button').click(function() {
        $(document).trigger('newevent');
     })
</script>
</body>

执行结果