zoukankan      html  css  js  c++  java
  • 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章事件结束-----------------------------------

  • 相关阅读:
    HDU 1022 Train Problem I
    HDU 1702 ACboy needs your help again!
    HDU 1294 Rooted Trees Problem
    HDU 1027 Ignatius and the Princess II
    HDU 3398 String
    HDU 1709 The Balance
    HDU 2152 Fruit
    HDU 1398 Square Coins
    HDU 3571 N-dimensional Sphere
    HDU 2451 Simple Addition Expression
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3788990.html
Copyright © 2011-2022 走看看