模拟事件的方法 — 第13.6讲

最新推荐文章于 2020-04-21 14:22:44 发布

flyingpig2016

最新推荐文章于 2020-04-21 14:22:44 发布

阅读量560

点赞数

分类专栏： javascript javascript高级程序设计解读 js事件文章标签：模拟事件

本文链接：https://blog.csdn.net/flyingpig2016/article/details/53761750

版权

javascript 同时被 3 个专栏收录

49 篇文章 2 订阅

订阅专栏

javascript高级程序设计解读

31 篇文章 1 订阅

订阅专栏

js事件

17 篇文章 1 订阅

订阅专栏

一：创建DOM事件的方法？
模拟事件的步骤：

创建event对象，它接受四种参数：
- UIEvents ：一般的UI事件。其实鼠标和键盘事件都继承自UI事件，DOM3级中是UIEvent；
- MouseEvents：一般化的鼠标事件。DOM3级中的是MouseEvent；
- MutationEventents：检测DOM变动的事件。DOM3中是MutationEvent。
- HTMLEvents ：一般化的HTML事件。
对事件有关的信息进行初始化，使用initMouseEvent()初始化，这个方法接受15个参数，含义如下：
- type：表示要触发的事件类型，(click,mouse等);
- bubbles(boolean)：表示事件是否冒泡；
- cancelable(boolean)：表示事件是否可以取消；
- view(abstract)：与事件相关联的视图。
- detail(整数)：与事件有关的详细信息。这个值一般只有事件处理承认那个徐使用，通常设置0；
- screenX(整数)：事件相对于屏幕的X的坐标；
- screenY(整数)：事件相对于屏幕的Y的坐标；
- clientX(整数)：事件相对于视口的X坐标；
- clientY(整数)：事件相对于视口的Y坐标；
- ctrlKey(boolean)：是否按下了Ctrl键；
- altKey(boolean)：是否按下了alt键；
- shiftKey(boolean)：是否按下了shift键；
- metakey(boolean)：是否按下了meta键；
- button(整数)：是否就按下了哪一个鼠标键。默认值0；
- relatedTarget(对象)：表示与事件相关的对象。在模拟mouseover和mouseout的时候使用。
  前四个参数比较重要，触发事件的时候需要用到，剩下的参数在处理事件的时候才会用到；
使用dispatchEvent()方法进行触发事件。只需要把event对象传入dispatchEvent()中就可以触发。
例子如下：

<body>
    <a href="http://www.baidu.com" id="baidu"></a> 
</body>
<script>
    var baidu = document.getElementById("baidu");　　
    var events = document.createEvent("MouseEvents");
    console.log(events.initMouseEvent())
    events.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);　　
    baidu.dispatchEvent(events);
</script>

二：模拟鼠标事件？
和模拟鼠标事件一样，DOM3级规定，调用createEvent()并传入”KeyboardEvent”就可以创建一个键盘事件。接受8个参数：

type：表示触发的事件类型(keydown)；
bubbles(Boolean)：事件是否应该冒泡；
cancelable(boolean)；是否可以取消默认行为；
view(abstract)：与事件相关联的视图。
key(布尔值)：按下的键的键码；
location：表示按下了哪个区域的键。0 表示默认主键盘，1表示左，2表示右键，3表示数字，4表示移动设备，5表示手柄。
modifier：空格分隔的修改键列表，如“shift”；
repeat：在一行中按了这个键多少次。

<body>
    <input type="text" id="shifta" autofocus>
</body>
<script>
    var shifta = document.getElementById("shifta");　　
    if(document.implementation.hasFeature("KeyboardEvents","3.0")){
        events = document.createEvent("KeyboardEvent");
        events.initKeyboardEvent("keydown",true,true,document.defaultView,'a',0,'shift',0);
    }
    shifta.dispatchEvent(events)

但是在火狐里面想要模拟这个事件就需要修改create.Event()里面的参数，变为：KeyEvents；还要修改的是初始化事件的对象initKeyEvent();代码如下所示：

    var shifta = document.getElementById("shifta");　　
    events = document.createEvent("KeyEvents");
    events.initKeyboardEvent("keypress",true,true,document.defaultView,false,false,false,false,65,65);
    shifta.dispatchEvent(events);

三：创建自定义DOM事件
创建自定义事件有三个步骤：

调用createEvent(“CustomEvent”)创建对象；
用一个名为initCustomEvent()的方法初始化事件；
触发事件。
其中initCustomEvent(）方法接收四个参数。
type：事件类型；
bubble(boolean)：表示事件是否冒泡；
cancelable(boolean)：表示事件是否可以取消；
detail(对象)：任意值，保存在event对象的detail对象中。
创建对象的代码如下：

        var mydiv = document.getElementById('myDiv');
        mydiv.addEventListener('myevent',function(event){
            console.log(event.detail);
        },false);
        if(document.implementation.hasFeature("CustomEvents","3.0")){
            event = document.createEvent("CustomEvent");
            event.initCustomEvent("myEvent",true,false,"hello world");
            console.log(event)
            mydiv.dispatchEvent(event);
        }

四：IE9以前事件模拟
IE创建新的事件与DOM中的方法不一样，也分为三个步骤：

createEventObject()创建对象；
初始化事件对象都是在event对象上直接添加，例如：event.screen = 0;
触发事件用fireEvent()方法。

模拟click的方法如下：

//      IE触发事件方法
        var aa = document.getElementById('a1');
        //创建事件对象
        var event = document.createEventObject();
        //初始化事件对象
        event.screenX = 100;
        event.screenY = 100;
        event.clientX = 200;
        event.clientY = 200;
        event.ctrlKey = false;
        event.altKey = false;
        event.shiftKey = false;
        event.button = 0;
        //触发事件
        a.fireEvent("onclick",event);

flyingpig2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模拟事件的方法 — 第13.6讲

一：创建DOM事件的方法？模拟事件的步骤：创建event对象，它接受四种参数： UIEvents ：一般的UI事件。其实鼠标和键盘事件都继承自UI事件，DOM3级中是UIEvent；MouseEvents：一般化的鼠标事件。DOM3级中的是MouseEvent；MutationEventents：检测DOM变动的事件。DOM3中是MutationEvent。HTMLEvents ：一
复制链接

扫一扫