使用Prototype触发事件

Question

有没有办法在Prototype中触发事件，就像可以使用jQuery的trigger功能一样？

我已经使用observe方法绑定了一个事件监听器，但是我也想能够通过程序来触发此事件。

- Neil Aitken

---

看一下我的答案。原型中有支持... - Mohit Jain

Answer 1

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

我已经使用过这个几次，它非常有效。它允许您手动触发本机事件，例如点击或悬停，如下所示：

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

这个方法的好处是，所有已附加的事件处理程序仍然会被执行，就像你自己点击该元素一样。

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

- Aron Rotteveel

---

太棒了！那帮了我很多忙。谢谢 :) - CalebHC

非常好的界面。不过，我希望.simulate方法能够本地化到Prototype.js中 :) - Jesper Rønn-Jensen

对于那些有插件许可问题的人来说，这个不起作用 -- 我最终在原生元素上调用了函数，因为Prototype非常糟糕。 - Marcy Sutton

很棒的东西。在Firefox、Chrome、Safari和IE（6-8）上进行了测试，用于启动lightwindow画廊的简单锚链接。 - Joshua Pinter

这仅支持HTML和鼠标事件。例如，您无法触发onchange事件，因为它是表单事件。但是，如果您合并Greg的脚本以处理这些情况，那么它就是一个非常好用的工具。 - Jānis Gruzis

@JānisGruzis HTMLEvents 包括 'change'。请参见 http://www.w3.org/TR/DOM-Level-2-Events/events.html - Paul Lynch

Answer 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');

- RoBorg

---

Greg的答案对我有用，但应该是$('foo').triggerEvent('mouseover');而不是$('foo').fireEvent('mouseover');。附：抱歉我是新手，不知道如何引用或评论已经存在的答案...谢谢。 - avlnx

你是不是想要 $('foo').triggerEvent('mouseover')？ - Roman Snitko

原型方式；非常好！ - quickshiftin

Answer 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);
    }
}

- John D

Answer 4

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

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

- Haqa