使用 Prototype 触发事件答案

【问题标题】：Trigger an event with Prototype使用 Prototype 触发事件
【发布时间】：2010-10-02 10:01:32
【问题描述】：

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

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

提前致谢

【问题讨论】：

看看我的回答。原型中有一个支持...

标签： javascript events prototypejs

【解决方案1】：

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

我已经用过几次了，它就像一个魅力。它允许您手动触发原生事件，例如点击或悬停，如下所示：

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

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

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

【讨论】：

太棒了！这对我帮助很大。谢谢:)
非常漂亮的界面。但是，我希望 .simulate 方法原生地进入 Prototype.js :)
这对于我们这些有插件许可问题的人来说是行不通的——我最终在原生元素上调用了这些函数，因为原型太糟糕了。
这仅支持 HTML 和鼠标事件。例如，您不能触发 onchange 事件，因为它的 Form 事件。但是，如果您针对这些情况合并 Gregs 脚本，那么它是非常不错的工具。
@JānisGruzis HTMLEvents 包含“更改”。见w3.org/TR/DOM-Level-2-Events/events.html

【解决方案2】：

我不认为 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');

【讨论】：

格雷格的答案对我有用，但它应该是 $('foo').triggerEvent('mouseover'); 而不是 $('foo').fireEvent('mouseover'); ps。抱歉，我是新来的，不知道如何引用或评论已经存在的答案...谢谢
你的意思是 $('foo').triggerEvent('mouseover') 吗？
原型方式；非常好！

【解决方案3】：

我发现这篇文章很有帮助...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);
    }
}

【讨论】：

【解决方案4】：

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

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

【讨论】：