search

Home >Web Front-end >JS Tutorial >JQuery compares the difference between trigger() and triggerHandler() through a simple example

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

巴扎黑
巴扎黑Original
2017-06-25 13:31:341428browse

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>

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;);
});

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;);
});

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Usage sharing: How to use jQuery to automatically trigger events triggerNext article：Usage sharing: How to use jQuery to automatically trigger events trigger

Related articles

See more