zoukankan      html  css  js  c++  java
  • 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");

  • 相关阅读:
    php开发中处理emoji表情和颜文字的兼容问题
    red入门学习笔记
    面向对象的三个基本特征(讲解)
    详解Ajax请求(四)——多个异步请求的执行顺序
    ASP.NET MVC模型绑定的6个建议,徐汇区网站设计 狼人:
    2010年度报告:是谁在编写Linux内核? 狼人:
    Kataspace:用HTML5和WebGL创建基于浏览器的虚拟世界 狼人:
    .NET Micro Framework 4.2 RC2发布!,徐汇区网站设计 狼人:
    SilveOS:基于Silverlight的Web操作系统,徐汇区网站设计 狼人:
    年轻人,你着什么急? 狼人:
  • 原文地址:https://www.cnblogs.com/No-nonsense/p/5073962.html
Copyright © 2011-2022 走看看