没有jquery,jquery的'trigger'方法相当于什么？

Question

没有jQuery,jQuery的trigger方法相当于什么？

例如,我如何做$('.blah').trigger('click');没有jQuery的事情？

Answer 1

event.initMouseEvent( "点击" ...

这是一个例子:

function simulateClick(elId) {
    var evt;
    var el = document.getElementById(elId);
    if (document.createEvent) {
        evt = document.createEvent("MouseEvents");
        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    (evt) ? el.dispatchEvent(evt) : (el.click && el.click());
}

var foo = document.getElementById("hey");

foo.onclick = function () {alert("bar");}

simulateClick("hey");

Answer 2

对于"非常伪劣的等价物"的某些价值:

var button = document.getElementById("thebutton")
button.click()

并非所有浏览器(例如Firefox!)都以这种方式允许模拟事件!onclick()仅在事件为内联时使用才有效.

请查看jQuery源代码并搜索"trigger:"(第一次匹配)以查看为"使其工作"所做的所有蠢事(其中很多内容只是围绕jQuery内部进行调整,其他框架使得有更简单的示例) ).

快乐的编码.

Answer 3

在Javascript中

var event = document.createEvent("Event");
event.initEvent("click", false, true); 
document.getElementById("blah").dispatchEvent(event);

等效于jQuery触发器,如下所示

$('#blah').trigger('click');

Answer 4

创建一个事件对象并将其传递给element.dispatchEvent(event)

  const event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });

  element.dispatchEvent(event);

更多信息

• 创建和触发事件https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events#triggering_built-in_events

• 所有活动https://developer.mozilla.org/en-US/docs/Web/Events#event_listing