trigger()
方法可以直接手动触发元素指定的事件,这些事件可以是元素自带事件,也可以是自定义的事件,总之,该事件必须能执行,它的调用格式为:
$(selector).trigger(event)
其中event参数为需要手动触发的事件名称。
例如,当页面加载时,手动触发文本输入框的“select”事件,使文本框的默认值处于全部被选中的状态,如下图所示:
在浏览器中显示的效果:
从图中可以看出,由于文本输入框调用trigger()
方法触发了“select”事件,因此,当页面加载完成后,文本框中的默认值处于全部被选中的状态。
如何理解这个函数呢?
先看下面这个程序:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>trigger()手动触发事件</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h3>trigger()手动触发事件</h3>
<div>土豪,咱们交个朋友吧</div>
<script type="text/javascript">
$(function () {
$("div").bind("change-color", function () {
$(this).addClass("color");
});
$("div").trigger("change-color");
});
</script>
</body>
</html>
给div绑定了一个change-color事件,如果触发就会调用后面的function。但是bind只是绑定,且这里的change-color是一个自定义事件,不会自己触发。而$("div").trigger("change-color")触发了这个事件。