JQuery的trigger和triggerHandler的使用

最新推荐文章于 2020-11-15 14:01:30 发布

原创最新推荐文章于 2020-11-15 14:01:30 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了JQuery中用于触发事件的两个方法：trigger和triggerHandler。通过实例代码展示了它们的区别和用法，帮助理解如何在DOM元素上执行事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>trigger和triggerHandler</title>

<!-- 1.导入JQ文件 -->
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">

    // 2.文档加载完成后执行jquery方法
    $(function(){
        // 3.给input元素绑定一个focus事件，当元素获得焦点时(当通过鼠标点击选中元素或通过 tab 键定位到元素时)，发生 focus 事件
	$("input").focus(function(){
	    $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
	});
		
	// 4.使用trigger时会先触发我们绑定的focus 事件，之后触发浏览器默认的focus事件(文本框会获得焦点)
	$("#old").click(function(){
	    $("input").trigger("focus");
	});
		
	// 如果对一个focus事件执行了 .triggerHandler()，只会触发你绑定的动作，浏览器默认动作将不会被触发
	$("#new").click(function(){
	    $("input").triggerHandler("focus");
	});
    });
</script>
</head>
<body>
	<button id="old">.trigger("focus")</button>
	<button id="new">.triggerHandler("focus")</button><br/><br/>
	<input type="text" value="To Be Focused"/>
</body>
</html>

参考文章：https://www.runoob.com/manual/jquery/