在平时上课过程中,在学习jquery的时候,有不少同学对于jquery里面得事件处理不是很了解,尤其是trigger()和triggerHandler()方法,所以今天就整理了下关于这块的相关资料给大家详细说明下.
其实对于trigger和triggerHandler来说,他们有一个共同点就是主动触发事件,但是,很多人容易搞混什么情况下用什么.ok咱们直接上代码,带着大家来好好屡一下.
那就先从trigger来说把.看代码.
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#outA").click(function(){
alert("A");
});
$("#outB").click(function(){
alert("B");
});
$("#outC").click(function(){
alert("C");
});
});
</script>
</head>
<body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200px; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;">
</div>
</div>
</div>
</body>
</html>
我们看到了有三个div标签,C在B中,B在A中,一层套一层,我们分别给每个div添加了一个点击事件.但是如果我们点击C的时候,看到了什么结果,是不是弹出了3个框,分别显示C-->B-->A.这个顺序正好是按照从里到外依次触发.而这种现象叫做点击冒泡.但这种效果真的是咱们所希望的么?我们通常这种情况下都会选择只让C弹框显示.
那这里怎么办.这个时候我们就可以通过主动触发事件来操作了.但是大家需要注意,如果是通过trigger来触发C的click事件的话会和被动点击一样也会弹出三个对话框,分别显示C-->B-->A.但是如果使用triggerHandler的形式来触发C的点击操作则会弹出C.
代码如下
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#outA").click(function(){
alert("A");
});
$("#outB").click(function(){
alert("B");
});
$("#outC").click(function(){
alert("B");
});
//弹出C-->B-->A
$("#outC").trigger("click")
//弹出C
$("#outC").triggerHandler("click")
});
</script>
</head>
<body>
<div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">
<div id="outB" style="height:200px; background:#0000ff;top:100px;position:relative;">
<div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;">
</div>
</div>
</div>
</body>
</html>
这是第一个需要注意的地方,那就是trigger会引起事件冒泡,而triggerHandler不会引起事件冒泡.
第二个需要注意的点是,trigger在触发操作后会默认执行浏览器得相应事件,triggerHandler不会触发浏览器相应事件.
代码如下
[AppleScript] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>Focused!</span>").appendTo("body").fadeOut(2000);
});
});
/**
* trigger:
* 1:引起了focus的回调方法.
* 2:input也获得了焦点
* triggerHandler:
* 1:引起了focus的回调方法.
* 2.input未获得焦点
*/
</script>
</head>
<body>
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused"/>
</body>
</html>
ok~,那到此为止相信大家对于trigger和triggerHandler应该有个比较清晰得理解了把~
| 
收藏
淘帖
踩
