JQuery compares the difference between trigger() and triggerHandler() through a simple example-JS Tutorial-php.cn

JQuery compares the difference between trigger() and triggerHandler() through a simple example

巴扎黑

Release： 2017-06-25 13:31:34

Original

1332 people have browsed it

When making web page special effects, we sometimes need to use simulation operations, that is, simulating manual operations. At this time, we will think of the two simulation operation methods trigger() and triggerHandler() in JQuery. Both of these two methods can easily simulate manual operations, so what is the difference between them? Below, we will introduce their differences through a simple case. The effect of this case: Refresh the page, it will automatically simulate the effect of clicking the button, and a prompt will pop up.

First, create a new page and add the following HTML code to the page:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
*{padding:0; margin:0;}
.hi{background:red;width:100px;height:100px; position:relative;}
</style>
<script type="text/javascript" src="/a/js/jquery-1.10.1.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div class="hi">
<form action="http://wanlimm.com" >
<input type="submit" value="aaa" />
<input type="submit" value="bbb" />
</form>
</div>
</body>
</html>

Copy after login

The form of this HTML code has two buttons, and their values are "aaa" and "bbb" ", now click either of these two buttons, you will get the http://wanlimm.com page.

Then, add the JS code between :

$(function(){
$(":submit").click(function(e){
alert($(this).val());
}).trigger(&#39;click&#39;);
});

Copy after login

Here, the trigger method we use, Refresh this page, there will be two pop-up windows, showing "aaa" and "bbb" respectively, and then it will automatically use the form behavior to automatically jump to the page http://wanlimm.com.

If you replace trigger with triggerHandler, there will only be one pop-up window, and the form behavior will be blocked and will not automatically jump to the http://wanlimm.com page.

We then remove the blue form code in the html code, and then add the method CSS to the JS code, as follows:

$(function(){
$(":submit").click(function(e){
alert($(this).val());
}).trigger(&#39;click&#39;).css(&#39;color&#39;,&#39;red&#39;);
});

Copy after login

When we refresh the page, after 2 pop-ups , the text in the button will turn red. However, if the trigger is changed to triggerHandler, after refreshing the page, the window will only pop up once and the text will not turn red.

To summarize the differences between trigger and triggerHandler:

1. The triggerHandler() method does not trigger the default behavior of the event, but trigger() does.

2. The triggerHandler() method will only affect the first matched element, while .trigger() will affect all.

3. The triggerHandler() method cannot be connected to other methods, because it returns the return value of the current event execution, not the object; trigger() can be connected to other methods, because it returns the current event triggering element. jQuery object.

4. TriggerHandler() will not bubble when creating an event. trigger() will bubble, but this kind of bubbling can only be reflected by custom events.

The above is the detailed content of JQuery compares the difference between trigger() and triggerHandler() through a simple example. For more information, please follow other related articles on the PHP Chinese website!