jQuery .trigger() event handler
Syntax and Description
.trigger(eventType[, extraParameters])
eventTypeis a string containing a JavaScript event type such as click or submitextraParametersis an array of additional parameters to pass along to the event handler
return value is the jQuery object, for chaining purposes.
trigger method executes all handlers and
behaviors attached to the matched elements for the given
event type.
Any event handlers attached with .bind()
or one of its shortcut methods can be fired
manually with the .trigger() method.
$('#foo').bind('click', function() {
alert($(this).text());
});
The event handler above can be fired by the following code.
$('#foo').trigger('click');
When we define a custom event type using the .bind()
method, the second
argument to .trigger() can be use
to passed information.
$('#foo').bind('custom', function(event, param1, param2) {
alert(param1 + "\n" + param2);
});
The code event handler above can be triggered by the following code.
$('#foo').trigger('custom', ['Custom', 'Event']);
Trigger focus event
The following code triggers focus events.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w .j a v a2 s . co m-->
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body");
});
});
</script>
</head>
<body>
<body>
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>
</body>
</html>
Trigger mouse over event
The following code trigger mouse over event.
<html>
<head>
<style type="text/css">
div { <!--from ww w .j a v a 2 s. c o m-->
padding : 10 10 10 10;
width : 100;
height : 100;
}
.div1 {
background-color : blue;
}
.div2 {
background-color : yellow;
}
.div3 {
background-color : green;
}
</style>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){
$("p").hide();
$(".div1", this).mouseover(function(){
$(this).find("p").fadeIn().fadeOut();
});
$(".div2", this).mouseover(function(){
$(this).find("p").fadeIn().fadeOut();
});
$(".div3", this).mouseover(function(){
$(this).find("p").fadeIn().fadeOut();
});
$("input").click(function(){
$("div").trigger("mouseover");
});
});
</script>
</head>
<body>
<div class="div1">
<p>java 2 s.com</p>
</div>
<div class="div2">
<p>ja va2s.com</p>
</div>
<div class="div3">
<p>java2s.com</p>
</div>
<input type="button" value="run with trigger"></input>
</body>
</html>
Trigger click event
The following code triggers the click event.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w ww . j av a 2 s. c o m-->
$("h1").click(function () {
alert("h1");
});
$("button:last").click(function () {
$("h1").trigger('click');
});
});
</script>
</head>
<body>
<body>
<div><h1>java 2s.com</h1></div>
<button value="java2s.com">java2s.com</button>
</body>
</html>
Trigger the change event
The following code trigger the change event with chained method.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- www .ja v a 2s. co m-->
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
}).trigger('change');
});
</script>
</head>
<body>
<select name="A" multiple="multiple">
<option>A</option>
<option selected="selected">B</option>
<option>C</option>
</select>
<div></div>
</body>
</html>
Trigger a custom event
The following code binds a custom event and then trigger the custom event during a button click event handler.
<html>
<head>
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w . j ava2 s . c om-->
$("div").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
});
$("button").click(function () {
$("div").trigger("myCustomEvent", [ "java2s.com" ]);
});
});
</script>
</head>
<body>
<body>
<div>java2s.com</div>
<button>bn</button>
</body>
</html>