jQuery之事件触发trigger

简介:

这个函数也会导致浏览器同名的默认行为的执行。比如,如果用trigger()触发一个'submit',则同样会导致浏览器提交表单。如果要阻止这种默认行为,应返回false。

<script type="text/javascript">
(function(){        $('#btn').bind("click", function(){                      $('#test').append("<p>我的绑定函数1</p>");               }).bind("click", function(){                      $('#test').append("<p>我的绑定函数2</p>");               }).bind("click", function(){                        $('#test').append("<p>我的绑定函数3</p>");               });        $('#btn').trigger("click");     }) </script>   这里面会自动触发一次click事件。也就是页面加载后,就会自动触发一次。  <script type="text/javascript">(function(){        $('#btn').bind("click", function(){                      $('#test').append("<p>我的绑定函数1</p>");               }).bind("click", function(){                      $('#test').append("<p>我的绑定函数2</p>");               }).bind("click", function(){                        $('#test').append("<p>我的绑定函数3</p>");               });        $('#btn').trigger("click");     }) </script>   这里面会自动触发一次click事件。也就是页面加载后,就会自动触发一次。  <script type="text/javascript">(function(){
('#btn').bind("myClick", function(){                      $('#test').append("<p>我的自定义事件.</p>");               });('#btn').bind("myClick", function(){                      $('#test').append("<p>我的自定义事件.</p>");               });('#btn').click(function(){
(this).trigger("myClick");        }).trigger("myClick");     }) </script>   上面的代码是jQuery中的连写方式。也会在页面加载后自动触发一次myClick事件。(this).trigger("myClick");        }).trigger("myClick");     }) </script>   上面的代码是jQuery中的连写方式。也会在页面加载后自动触发一次myClick事件。('#btn').click(function(){ (this).trigger("myClick"); }).trigger("myClick");类似于(this).trigger("myClick"); }).trigger("myClick");类似于('#btn').click(function(){ (this).trigger("myClick"); });(this).trigger("myClick"); });('#btn').trigger("myClick"); 并列的写法。



trigger()方法还可以传递参数。

<script type="text/javascript">
(function(){(function(){('#btn').bind("myClick", function(event, message1, message2){
('#test').append( "<p>"+message1 + message2 +"</p>");         });('#test').append( "<p>"+message1 + message2 +"</p>");         });('#btn').click(function(){
$(this).trigger("myClick",["我的自定义","事件"]);
}).trigger("myClick",["我的自定义","事件"]);
})
</script>

在每一个匹配的元素上触发某类事件。还有一个跟trigger差不多的方法,triggerHandler()。

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。
这个方法的行为表现与trigger类似,但有以下三个主要区别:
* 第一,他不会触发浏览器默认事件。
* 第二,只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。



<script type="text/javascript">
(function(){(function(){('#old').bind("click", function(){
("input").trigger("focus");         });("input").trigger("focus");         });('#new').bind("click", function(){
("input").triggerHandler("focus");         });("input").triggerHandler("focus");         });("input").focus(function(){
$("body").append("<p>focus.</p>");
})
})
</script>




trigger方法还有可能触发input的focus事件。而triggerHandler则不会触发默认事件focus聚焦。



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/archive/2012/09/12/2681836.html,如需转载请自行联系原作者

相关文章
N..
|
24天前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
N..
11 1
|
29天前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
12 0
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
20 1
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery事件切换(原来还有这种写法)
前端基础 - JQuery事件切换(原来还有这种写法)
29 0
|
7月前
|
JavaScript 前端开发
jQuery事件处理
jQuery事件处理
56 0
|
6月前
|
JavaScript 前端开发 索引
Javascript知识【jQuery:数组遍历和事件】
Javascript知识【jQuery:数组遍历和事件】
|
28天前
|
JavaScript 前端开发
jQuery中的事件与动画
jQuery中的事件与动画
10 0
|
29天前
|
JavaScript
jQuery动画与事件概念以及语法
jQuery动画与事件概念以及语法
8 0
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
39 0
|
3月前
|
JavaScript 前端开发
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
jQuery事件1-第5次课-JQ的事件跟JS一样的作用,只是写法不一样-附案例、任务
37 0