• JavaScript高级程序设计51.pdf


    (续上篇)

    模拟鼠标事件

    var btn=document.getElementById("myBtn");

    //创建事件对象

    var event=document.createEvent("MouseEvents");

    //初始化事件对象

    event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);

    //触发事件

    btn.dispatchEvent(event);

    模拟键盘事件

    “DOM2级事件”草案中本来包含了键盘事件,在定稿之前又删除了,Firefox根据草案实现了键盘事件;“DOM3级事件”与删除的“DOM2级事件”有很大不同

    DOM3级规定,调用createEvent()并传入“KeyboardEvent”创建一个键盘事件,返回的对象包含initKeyEvent()方法,接收下列参数

    type(字符串)要触发的事件类型,“keydown”

    bubbles(布尔值)是否可以冒泡

    cancelable(布尔值)是否可以取消

    view(AbstractView)与事件关联的视图,几乎总是设置为document.defaultView

    key(布尔值)按下的键的键码

    location(整数)表示按下了哪里的键,0表示默认主键盘,1表示左,2表示右,3表示数字键盘,4表示移动设备的键盘(虚拟键盘),5表示手柄

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

    repeat(整数)在一行中按了这个键多少次

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

    var textbox=document.getElementById("myTextbox"),

      event;

    //DOM3级事件

    if(document.implementation.hasFeature("KeyboardEvent","3.0")){

          event=document.createEvent("KeyboardEvent");

    //初始化对象

      event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"shift",0);

        }

    //触发事件

    textbox.dispatchEvent(event);

    以上的例子是模拟按住shift的同时按下A键

    在Firefox中,调用createEvent()并传入“KeyEvents”就可以创建一个键盘事件,返回的对象包含一个initKeyEvent()方法,接收10个参数

    type(字符串)要触发的事件类型,“keydown”

    bubbles(布尔值)是否可以冒泡

    cancelable(布尔值)是否可以取消

    view(AbstractView)与事件关联的视图,几乎总是设置为document.defaultView

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

    altKey(布尔值)是否按下了Alt键,默认为false

    shiftKey(布尔值)是否按下了Shift键,默认为false

    metaKey(布尔值)是否按下了Meta键,默认为false

    keyCode(整数)被按下或释放的键的键码,这个参数对keydown和keyup事件有用,默认为0

    charCode(整数)通过按键生成的字符的ASCII编码,这个参数对keypress事件有用,默认为0

    //只适用于Firefox

    var textbox=document.getElementById("myTextbox");

    //创建事件对象

    var event=document.createEvent("KeyEvents");

    //初始化事件对象

    event.initKeyEvent("keypress",true,true,document.defaultView,false,false,false,false,65,65);

    //触发事件

    textbox.dispatchEvent(event);

    在其他浏览器中,则需要创建一个通用的事件,然后再向事件对象中添加键盘事件特有的信息

    var textbox=document.getElementById("myTextbox");

    //创建事件对象

    var event=document.createEvent("Events");

    //初始化事件对象

    event.initEvent(type,bubbles,cancelable);

    event.view=document.defaultView;

    event.altKey=false;

    event.ctrlKey=false;

    event.shiftKey=false;

    event.metaKey=false;

    event.keyCode=65;

    event.charCode=65;

    //触发事件

    textbox.dispatchEvent(event);

    在此必须使用通用事件,而不能使用UI事件,因为UI事件不允许向event对象添加新的属性

    这样的模拟事件虽然会触发键盘事件,但却不会向文本框中写入文本,这是由于无法精确模拟键盘事件造成的

    模拟其他事件

    模拟变动事件createEvent("MutationEvents"),包含initMutationEvent()方法的变动事件对象,接收type、bubbles、cancelable、relatedNode、preValue、newValue、attrName和attrChange

    模拟HTML事件(如“focus”),createEvent("HTMLEvents"),initEvent()初始化

    浏览器很少使用变动事件和HTML事件,因为它们会受到一些限制

    自定义DOM事件

    自定义事件不是由DOM原生触发的,它的目的是让开发人员创建自己的事件createEvent("CustomEvent"),返回的对象有一个initCustomEvent()方法,接收4个参数

    type(字符串)触发的事件类型

    bubbles(布尔值)事件是否可以冒泡

    cancelable(布尔值)事件是否可以取消

    detail(对象)任意值,保存在event对象的detail属性中

    var div=document.getElementById("myDiv"),

      event;

    EventUtil.addHandler(div,"myevent",function(event){

          alert("DIV:"+event.detail);

        });

    EventUtil.addHandler(document,"myevent",function(event){

          alert("DOCUMENT:"+event.detail);

        });

    if(document.implementation.hasFeature("CustomEvents","3.0")){

          event=document.createEvent("CustomEvent");

          event.initCustomEvent("myevent",true,false,"Hello world!");

          div.dispatchEvent(event);

        }

    支持自定义事件的浏览器有IE9+和Firefox6+

    IE中的模拟事件

    IE8之前的版本模拟事件与DOM中的思路相似:创建event对象,指定相应信息,触发事件

    var btn=document.getElementById("myBtn");

    //创建事件对象(不接受参数)

    var event=document.createEventObject();

    //添加必要信息

    event.screenX=100;

    event.screenY=0;

    event.clientX=0;

    event.clientY=0;

    event.ctrlKey=false;

    event.altKey=false;

    event.shiftKey=false;

    event.button=0;

    //触发事件(接收事件处理程序的名称和event对象2个参数),fireEvent()方法会自动为event对象添加srcElement和type属性

    textbox.fireEvent("onkeypress",event);

    与通用事件一样,这个例子触发了事件处理程序却不会在文本框中看到任何字符

    -----------------------------------13章事件结束-----------------------------------

  • 相关阅读:
    Altium Designer 快捷键与技巧
    常用贴片三极管型号与丝印的对应关系(SOT23)
    buck型DC-DC分析
    IAR升级之后,编译stm32官方工程报错的解决办法
    单片机中不带字库LCD液晶屏显示少量汉字
    结构体应用及其字节对齐问题
    退出循环break,continue,return,goto分析
    金莎伪粉丝的日常
    keil5 mdk使用ST-Link II下载出现cannot halt the core解决办法
    keil5 mdk调用外部编辑器notepad++、sublime3、VSCode总结
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3788990.html
Copyright © 2020-2023  润新知