jQuery trigger()事件使用

本是古典何须时尚 2024-02-18 21:14 50阅读 0赞

**一、常用事件**

在页面加载完成时 自动触发input的点击事件，在移动端可以实现自动弹出输入法，获得焦点

$("input:first").trigger("click").focus();

![70][]

**二、自定义事件**

$("#btn").on("myClick",function(){
    	 $("#test").append("<p>自定义事件哦!</p>");	
    		
    	});
    	
    	//单击事件
    	$("#btn").click(function(){
    		//自动触发
    		$(this).trigger("myClick");
    		
    	})

![70 1][] ![70 2][]

**三、传递参数**

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

$("#btn").on("myClick",function(event, msg1, msg2){
    	   $("#test").append("<p>"+msg1+msg2+"</p>");	
    		
    	});
    	
    	//单击事件
    	$("#btn").click(function(){
    		//自动触发
    		$(this).trigger("myClick",["参数自定义->","参数触发"]);
    		
    	})

![70 3][] ![70 4][]

**四、执行默认操作**

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

$("input").trigger("focus");

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

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

$("input").triggerHandler("focus");

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

*操作如下*

页面代码:

<input />
    <button id="old">trigger</button>
    <button id="new">triggerHandler</button>

$(function(){
    	
    	
    	//trigger
    	$("#old").on("click",function(){
    		  $("input").trigger("focus");
    		
    		});
    		
    
    	//triggerHandler
        $("#new").on("click",function(){
    		  $("input").triggerHandler("focus");
    		
    		});
    
    	
    	//获得焦点事件
    	$("input").focus(function(){
    		//
    		$("body").append("<div>--trigger--</div>");
    		
    	})
    	
     });

运行:

![70 5][]

![70 6][]

![70 7][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d207da862c6843f48da7f9aa4de0500c.png
[70 1]: https://img-blog.csdn.net/20180620115205894?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ba64941026e34d678a5855b7011f9b35.png
[70 3]: https://img-blog.csdn.net/20180620115334157?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/cc5b7077546d4906a8eedc2d222d39c6.png
[70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1d056260852c4e4c8b25dfe89236e86d.png
[70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/731b582d08714bd9ab3961c3660f9a8c.png
[70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/d30683396edc406dbe24b6809281ccde.png