触发事件

如何创建和分发事件. 与 jQuery 相对应的功能: $.trigger(), $.click(), $.blur(), $.keyup(), $.mousedown(), etc.


有几种快捷的方法可以触发特定元素上的事件:


var el = document.querySelector('input[type="text"]');

// for any element
el.click();

// for inputs and textareas
el.focus();
el.blur();

// for form elements
var my_form = document.querySelector('form');

my_form.submit();
my_form.reset();
      

与jQuery相比,这些方法不能将event对象作为参数传递给这些方法。

如果您需要触发其他事件,例如 mousedown 或 keyup,请使用以下函数:


function triggerEvent(el, type){
  if ('createEvent' in document) {
      // modern browsers, IE9+
      var e = document.createEvent('HTMLEvents');
      e.initEvent(type, false, true);
      el.dispatchEvent(e);
  } else {
      // IE 8
      var e = document.createEventObject();
      e.eventType = type;
      el.fireEvent('on'+e.eventType, e);
  }
}
      

使用方法如下


var el = document.querySelector('input[type="text"]');
triggerEvent(el, 'mousedown');
      

使用triggerEvent(),您还可以调度绑定到该元素的任何自定义事件。