js事件模拟

1 原始js事件模拟

1.1 模拟鼠标单击事件

模拟鼠标单击"click"事件示例：

var fn = function(){
  console.log('button was clicked'); // 此函数通过事件的方式被调用
}

var btn = document.getElementById('#id');
btn.addEventListener('click', fn);

// 点击事件 MouseEvent
var mouseClick = document.createEvent('MouseEvent');
mouseClick.initMouseEvent('click', false, false, null);

// 执行
btn.dispatchEvent(mouseClick); // 'click'

1.2 自定义事件：

// 随便自定义一个事件 custom.click
btn.addEventListener('custom.click', fn);

var custumClick = document.createEvent('CustomEvent');
// customEvent 也可以初始化为鼠标事件，不一定非要自定义事件
custumClick.initCustomEvent('custom.click', false, false, null);

btn.dispatchEvent(custumClick); // 'click'

2 jQuery事件模拟

2.1 jquery模拟鼠标单击

$("#btn").on("click", function(){ console.log("button was clicked") }
$("#btn").trigger();

2.2 jquery自定义事件

jquery也支持自定义事件，同时还支持多参数

$("#btn").on("custom.click", function(e, d1, d2){ 
    console.log(d1 + ", " + d2)
});
$("#btn").trigger(["hello", "world!"]);