原生JAVASCRIPT模拟事件点击

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

自动触发内置事件

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

//自动触发内置事件
function commonTrigger(el, type) {
    var evt = document.createEvent("MouseEvents");
    evt.initEvent(type, true, true);
    el.dispatchEvent(evt);
}
//自动触发内置事件
function trigger(el, type) {
    var event = new MouseEvent(type, {
        'view': window,
        'bubbles': true,
        'cancelable': true
    });
    el.dispatchEvent(event);
}

触发自定义事件

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

function customTrigger(el, type) {
    var event = new Event(type);
    el.addEventListener(type, function (e) {
        alert('ok');
    }, false);
    el.dispatchEvent(event);
}

使用方法

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

var el = document.getElementById('element');
var type = 'click';
commonTrigger(el, type);
trigger(el, type);
customTrigger(el, type);

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

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	}

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);