Notes for a front-end developer, esyou.net

0%

原生JAVASCRIPT模拟事件点击

在某些功能上可能我们会使用到模拟用户点击,当然在jQuery中的模拟事件已经很强大了,但是我们再使用其他库或者使用原生JavaScript的时候,不可能使用jQuery的美元号去实现这个功能了,因此只能通过原生JavaScript去实现,下面我们就来看看代码该如何写。
原生js中可以通过dispatch方法来模拟用户行为,如点击(click),触屏(touchStart)操作等,我们都可以进行模拟。

自动触发内置事件

自动触发事件有两种方法,目前支持IE内核以及Firefox内核浏览器,但是并不支持chrome

1
//自动触发内置事件
2
function commonTrigger(el, type) {
3
    var evt = document.createEvent("MouseEvents");
4
    evt.initEvent(type, true, true);
5
    el.dispatchEvent(evt);
6
}
7
//自动触发内置事件
8
function trigger(el, type) {
9
    var event = new MouseEvent(type, {
10
        'view': window,
11
        'bubbles': true,
12
        'cancelable': true
13
    });
14
    el.dispatchEvent(event);
15
}

触发自定义事件

以上的内置事件,在chrome中无法执行,我们只能通过触发自定义事件的方法进行触发,相关代码如下:

1
function customTrigger(el, type) {
2
    var event = new Event(type);
3
    el.addEventListener(type, function (e) {
4
        alert('ok');
5
    }, false);
6
    el.dispatchEvent(event);
7
}

使用方法

一看上面的函数,就知道使用方法很简单了,使用如下

1
var el = document.getElementById('element');
2
var type = 'click';
3
commonTrigger(el, type);
4
trigger(el, type);
5
customTrigger(el, type);

虽然这个代码能够在浏览器中,特别是chrome中实现点击事件,但是总是无法真实的模拟用户点击,大家慎用,jQuery中的方法,我没有尝试过,不知道是否能够真实模拟用户点击。如果你要模拟真实用户点击事件,得通过其他类库实现!