jQuery 高级事件(模拟操作)

一.模拟操作

在事件触发的时候,有时我们需要一些模拟用户行为的操作。例如:当网页加载完毕后 自行点击一个按钮触发一个事件,而不是用户去点击

//点击按钮事件

$(‘input‘).click(function(){

alert(‘我的第一次点击来自模拟!‘);

});

//模拟用户点击行为

$(‘input‘).trigger(‘click‘);

//可以合并两个方法

$(‘input‘).click(function(){

alert(‘我的第一次点击来自模拟!‘);

}).trigger(‘click‘);

有时在模拟用户行为的时候,我们需要给事件执行传递参数,这个参数类似与 `event.data` 的额外数据,可以可以是数字、字符串、数组、对象。

$(‘input‘).click(function(e,data1,data2){

alert(data1+‘,‘+data2);

}).trigger(‘click‘,[‘abc‘,‘123‘]);

注意:当传递一个值的时候,直接传递即可。当两个值以上,需要在前后用中括号包含 起来。但不能认为是数组形式,下面给出一个复杂的说明。

$(‘input‘).click(function(e,data1,data2){

alert(data1.a+‘,‘ +data2[1]);

}).trigger(‘click‘,[{‘a‘ :‘1‘,‘b‘:‘2‘},[‘123‘,‘456‘]]);

除了通过 JavaScript 事件名触发,也可以通过自定义的事件触发,所谓自定义事件其实 就是一个被.bind()绑定的任意函数。

$(‘input‘).bind(‘myEvent‘,function(){

alert(‘自定义事件!‘);

}).trigger(‘myEvent‘);

.trigger()方法提供了简写方案,只要想让某个事件执行模拟用户行为,直接再调用一个 空的同名事件即可。

$(‘input‘).click(function(){

alert(‘我的第一次点击来自模拟!‘);

}).click(); //空的 click()执行的是 trigger()

这种便捷的方法,jQuery 几乎个所有常用的事件都提供了。

jQuery 还提供了另外一个模拟用户行为的方法:`.triggerHandler()`;这个方法的使用 和.trigger()方法一样。

$(‘input‘).click(function(){

alert(‘我的第一次点击来自模拟!‘);

}).triggerHandler(‘click‘);

在常规的使用情况下,两者几乎没有区别,都是模拟用户行为,也可以可以传递额外参数。但在某些特殊情况下,就产生了差异:

1.`.triggerHandler()`方法并不会触发事件的默认行为,而`.trigger()`会。

$(‘form‘).trigger(‘submit‘); //模拟用户执行提交,并跳转到执行页面

$(‘form‘).triggerHandler(‘submit‘); //模拟用户执行提交,并阻止的默认行为

如果我们希望使用.trigger()来模拟用户提交,并且阻止事件的默认行为,则需要这么写:

$(‘form‘).submit(function(e){

e.preventDefault(); //阻止默认行为

}).trigger(‘submit‘);

2.`.triggerHandler()`方法只会影响第一个匹配到的元素,而`.trigger()`会影响所有。

3.`.triggerHandler()`方法会返回当前事件执行的返回值,如果没有返回值,则返回 `undefined`;而`.trigger()`则返回当前包含事件触发元素的 jQuery 对象(方便链式连缀调用)。

alert($(‘input‘).click(function(){
return 123;
}).triggerHandler(‘click‘)); //返回 123,没有 return 返回

4.`.trigger()`在创建事件的时候,会冒泡。但这种冒泡是自定义事件才能体现出来,是 jQuery 扩展于 DOM 的机制,并非 DOM 特性。而`.triggerHandler()`不会冒泡。 

var index=1;

$(‘div‘).bind(‘myEvent‘,function(){

alert(‘自定义事件‘+index);

index++;

});

$(‘.div3‘).trigger("myEvent");

时间: 2024-10-08 01:09:27

jQuery 高级事件(模拟操作)的相关文章

jQuery 高级事件

jQuery 不但封装了大量常用的事件处理,还提供了不少高级事件方便开发者使用.比如模拟用户触发事件.事件委托事件.和统一整合的 on 和 off,以及仅执行一次的 one 方法.这些方法大大降低了开发者难度,提升了开发者的开发体验. 一.模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕后 自行点击一个按钮触发一个事件,而不是用户去点击 //点击按钮事件 $('input').click(function(){ alert('我的第一次点击来自模拟!'); }

jQuery高级事件

学习要点: 1.模拟操作 2.命名空间 3.事件委托 on.off和one 一.模拟操作 1.trigger 方法 <div style="width:200px;height:200px;background:red;"> <input type="button" value="点击"/> </div> $("input").click(function () { console.log(

JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)

一.jQuery 页面加载后执行 代码执行的时机选择 - $(document).ready()方法和 window.onload事件具有相似的功能,但是在执行时机方面是有区别的 - window.onload 事件是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行 - $(document).ready()方法注册的事件处理程序,在DOM完全加载后就可以调用 - 一般来讲, $(document).ready()的执行要优于window.onload事件 - 需要注意的是,

jQuery事件篇---高级事件

内容提纲: 1.模拟操作 2.命名空间 3.事件委托 4.on.off 和 one 发文不易,转载请注明出处! 一.模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击. //点击按钮事件 $('input').click(function () { alert('我的第一次点击来自模拟!'); }); //模拟用户点击行为 $('input').trigger('click'); //可以合并两个方法 $('inp

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc

jQuery学习笔记(五六)——高级事件

一.自定义事件 1.$('input').trigger('click') 模拟操作点击事件 2.$('input').bind('myEvent',fn).trigger('myEvent') 自定义事件 3.$().trigger()/$().triggerHandler() 区别是triggerHandler阻止默认事件,没有返回值(define) 二.命名空间: $('input').bind('click.abc',fn) 设置带命名空间的点击事件 $('input').unbind(

jquery和js操作,【包含jquery挂事件】

JS根据ID取元素,取到的是具体的元素  var a = document.getElementById("p1");根据CLASS取  var a = document.getElementsByClassName("aa");根据标签名取  var a = document.getElementsByTagName("div");根据name取  var a = document.getElementsByName("cc"

jQuery动态绑定事件(简单模拟二级联动效果)

绑定事件:$("#leyangjun").bind("change",function(){ jquery 给标签赋值:$('#leyangjun').text('好一朵美丽的茉莉花'); 清空表单值:$("#leyangjun").empty(); radio取值:$("input[name='radioName'][checked]").val(); <!DOCTYPE html PUBLIC "-//W3

高级事件(一)

jQuery不但封装了大量常用的事件处理,还提供了不少高级事件方便开发者使用.比如模拟用户触发事件.事件委托事件.和统一整合的on和off,以及仅执行一次的one方法.这些方法大大降低了开发者难度,提升了开发者的开发体验. 模拟操作 在事件触发的时候,有时我们需要一些模拟用户行为的操作.例如:当网页加载完毕后自行点击一个按钮触发一个事件,而不是用户去点击. html(部分)代码: <input type="button" value="按钮" /> jQ