• JavaScript 事件——“模拟事件”的注意要点


    转载自:[https://segmentfault.com/a/1190000004339133](https://segmentfault.com/a/1190000004339133)

    DOM中的事件模拟

    三个步骤:

    首先通过document.createEvent()方法创建event对象,接收一个参数,即表示要创建的事件类型的字符串:

    • UIEvents(DOM3中的UIEvent)鼠标和键盘事件;

    • MouseEvents(DOM3中的MouseEvent)鼠标事件;

    • MutationEvents(DOM3中的MutationEvent)变动事件;

    • HTMLEvents(没有DOM3中对应的事件)HTML事件;

    其次在创建了event对象之后,还需要使用与事件有关的信息对其进行初始化。每种类型的event对象都有一个特殊的方法,为它传入适当的数据就可以初始化该event对象。用event.init......()此类行的方法。

    最后就是触发事件。这需要使用dispatchEvent()方法,接收一个参数,即表示要触发的event对象。

    模拟鼠标事件

    首先创建鼠标事件对象的方法createEvent()传入MouseEvents,返回的对象的方法initMouseEvent(),接收15个信息:

    1. type(字符串):事件类型如“click”;

    2. bubble(布尔值):是否冒泡;

    3. cancelable(布尔值):是否可取消;

    4. view(AbstractView):与事件关联的视图,一般为document.defaultView

    5. detail(整数):一般为0,一般只有事件处理程序使用;

    6. screenX(整数):事件相对于屏幕的X坐标;

    7. screenY(整数);

    8. clientX(整数):事件相对于视口的X坐标;

    9. clientY(整数);

    10. ctrlKey(布尔值):是否按下了Ctrl键,默认为false;

    11. altKey(布尔值);
    12. shiftKey(布尔值);
    13. metaKey(布尔值);
    14. button(整数):表示按下了哪个鼠标键,默认为0;
    15. relatedTarget(对象):表示与事件相关的对象。一般只有在模拟mouseover与mouseout时使用。

    最后记得把event对象传给dispatchEvent()方法。

    如模拟按钮的单击事件:

    //模拟click事件
    //获取btn
    var btn = document.querySelector("#btn");
    //创建event
    var event = document.createEvent("MouseEvents");
    //初始化event
    event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
    //click事件绑定事件处理程序
    btn.onclick = function () {
        console.log("hello");
    }
    //触发事件
    btn.dispatchEvent(event); //hello
    //取消引用
    btn.onclick = null;
    

    另外,建议使用构造函数"MouseEvent":

    var evt = new MouseEvent("click", {
        bubbles: true,
        cancelable: true,
        view: window
    });
    

    模拟键盘事件

    首先创建鼠标事件对象的方法createEvent()传入KeyboardEvents,返回的对象的方法initKeyEvent(),接收下面参数:

    1. type(字符串):要触发的事件类型,“keydown”等;

    2. bubbles(布尔值):表示事件是否应该冒泡;

    3. cancelable(布尔值):是否可以取消;

    4. view(AbstractView):与事件关联的视图。一般为document.defaultView

    5. key(布尔值):表示按下的键的键码;

    6. location(整数):表示按下哪里的键。0为主键盘;1为左;2为右;3为数字键盘;4为虚拟键盘;5为手柄;

    7. modifiers(字符串):空格分隔的修改键列表,如“shift”;

    8. repeat(整数):在一行中按下了多少次这个键;

    由于DOM3级不提倡使用keypress事件,因此只能利用这种技术来模拟keydown和keyup事件:

  • 相关阅读:
    Telnet登陆网络设备执行命令脚本
    Python发送飞书消息
    百度贴吧爬虫
    notpadd++ 颜色
    git 快速解决冲突 工具
    go strconv模块
    Day 03 strings 和 strconv 的使用, 时间和日期类型 流程控制 函数
    go 的flag用法
    Python schedules.crontab方法代码示例 https://vimsky.com/examples/detail/pythonmethodcelery.schedules.crontab.html
    go bufio和fmt.Scanf()用法
  • 原文地址:https://www.cnblogs.com/qiangspecial/p/11224519.html
Copyright © 2020-2023  润新知