如果没有jquery,jquery的'trigger'方法的等价物是什么?

4xy9mtcn  于 2023-06-22  发布在  jQuery
关注(0)|答案(5)|浏览(156)

如果没有 * jQuery*,jQuerytrigger方法的等价物是什么?
例如,如何在没有 jQuery 的情况下执行类似$('.blah').trigger('click');的操作?

bf1o4zei

bf1o4zei1#

event.initMouseEvent(“click”...
下面是一个例子:

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

t3irkdon2#

对于一些价值的“一个非常劣质的等价物”:

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

并非所有浏览器(例如Firefox!)允许以这种方式模拟事件!使用onclick()只在事件是内联的情况下才有效。
请参阅the jQuery source并搜索“trigger:“(第一个匹配)以查看所有为“使其工作”而做的令人讨厌的事情(其中很大一部分只是在jQuery内部进行咀嚼,其他框架有更简单的示例)。
快乐编程。

nlejzf6q

nlejzf6q3#

在JavaScript中

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

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

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

o4hqfura4#

创建一个Event Object并将其传递给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
xytpbqjk

xytpbqjk5#

下面是我的例子。在所有情况下都能完美工作

var d=document.createEvent("MouseEvents"),
    c=document.createEvent("MouseEvents"),
    p=document.createEvent("MouseEvents");
    d.initMouseEvent("mousedown",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
    c.initMouseEvent("click"    ,true,true,window,0,0,0,0,0,false,false,false,false,0,null);
    p.initMouseEvent("mouseup"  ,true,true,window,0,0,0,0,0,false,false,false,false,0,null);

    var element =// some selector;

    element.dispatchEvent(d);
    element.dispatchEvent(c);
    element.dispatchEvent(p);

相关问题