使用 Prototype 触发事件

IT技术 javascript events prototypejs
2021-02-01 20:16:22

有没有人知道在 Prototype 中触发事件的方法,就像使用 jQuery 的触发函数一样?

我已经使用observe 方法绑定了一个事件侦听器,但我也希望能够以编程方式触发事件。

提前致谢

4个回答

event.simulate.js 适合您的需求。

我已经多次使用它,它就像一个魅力。它允许您手动触发本机事件,例如单击或悬停,如下所示:

$('foo').simulate('click');

这样做的好处是所有附加的事件处理程序仍将被执行,就像您自己单击元素一样。

对于自定义事件,您可以使用标准原型方法Event.fire()

这对我们这些有插件许可问题的人来说没有用——我最终调用了原生元素上的函数,因为 Prototype 太难了。
2021-03-19 20:16:22
太棒了!这对我帮助很大。谢谢 :)
2021-03-29 20:16:22
非常漂亮的界面。但是,我希望该.simulate方法能够以本机方式进入 Prototype.js :)
2021-03-30 20:16:22
这仅支持 HTML 和鼠标事件。例如,您不能触发 onchange 事件,因为它的 Form 事件。但是,如果您为这些情况合并 Gregs 脚本,那么它是非常好的工具。
2021-04-08 20:16:22
@JānisGruzis HTMLEvents 包括“更改”。w3.org/TR/DOM-Level-2-Events/events.html
2021-04-09 20:16:22

我不认为 Prototype 内置了一个,但是您可以使用它(未经测试,但至少应该让您朝着正确的方向前进):

Element.prototype.triggerEvent = function(eventName)
{
    if (document.createEvent)
    {
        var evt = document.createEvent('HTMLEvents');
        evt.initEvent(eventName, true, true);

        return this.dispatchEvent(evt);
    }

    if (this.fireEvent)
        return this.fireEvent('on' + eventName);
}

$('foo').triggerEvent('mouseover');
原型方式;非常好!
2021-03-16 20:16:22
你的意思是 $('foo').triggerEvent('mouseover') 吗?
2021-03-21 20:16:22
格雷格的回答对我有用,但它应该$('foo').triggerEvent('mouseover');代替$('foo').fireEvent('mouseover');ps。对不起,我是新来的,不知道如何引用或评论已经存在的答案......谢谢
2021-04-06 20:16:22

我发现这篇文章很有帮助... http://jehiah.cz/archive/firing-javascript-events-properly

它涵盖了在 Firefox 和 IE 中触发事件的方法。

function fireEvent(element,event){
    if (document.createEventObject){
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on'+event,evt)
    }
    else{
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true ); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

这里的答案适用于“正常”事件,即由用户代理定义的事件,但对于自定义事件,您应该使用原型的“fire”方法。例如

$('something').observe('my:custom', function() { alert('Custom'); });
.
.
$('something').fire('my:custom'); // This will cause the alert to display