Trigger an Event with Prototype

Trigger an event with Prototype

event.simulate.js fits your needs.

I've used this several times and it works like a charm. It allows you to manually trigger native events, such as click or hover like so:

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

The great thing about this is that all attached event handlers will still be executed, just as if you would have clicked the element yourself.

For custom events you can use the standard prototype method Event.fire().

How to trigger events (onclick) with specific orders in js/prototype

Event handlers are functions in JavaScript, and functions are prime citizens in JavaScript. Usually a middle object contains the list of all handlers as an array. For example, in jQuery, data('events') holds the event handlers. Unless prototype has an straightforward, you should manually fetch all handlers, order them up and assign them back.

Or

As @gaby has said, you can bind them using correct order in you markup at first place.

js triggering event from prototype from different script

I found the solution. The problem was with the order of my code in the second script.

I instantiate a lot of elements of the game in the prototype. Also the element with id "trigger".

Before I instantiated the prototype (and the elements of the game) I tried to bind the event "noPossibilities" on the element with id trigger. Since this object wasn't instantiated yet there was nothing to bind so it wasn't working.

How to trigger event in JavaScript?

Note: the initEvent method is now deprecated. Other answers feature up-to-date and recommended practice.

---

You can use fireEvent on IE 8 or lower, and W3C's dispatchEvent on most other browsers. To create the event you want to fire, you can use either createEvent or createEventObject depending on the browser.

Here is a self-explanatory piece of code (from prototype) that fires an event dataavailable on an element:

var event; // The custom event that will be created
if(document.createEvent){
    event = document.createEvent("HTMLEvents");
    event.initEvent("dataavailable", true, true);
    event.eventName = "dataavailable";
    element.dispatchEvent(event);
} else {
    event = document.createEventObject();
    event.eventName = "dataavailable";
    event.eventType = "dataavailable";
    element.fireEvent("on" + event.eventType, event);
}

How to trigger an event in jquery if an element is changed programmatically?

You can use Function.prototype.call() to call named function checkboxClick within event handler, instead of dispatching change event

$(className).not(this).prop("checked", this.checked).each(function() {
  checkboxClick.call(this)
});

Custom trigger event using prototype js not finding current pasted values

Managed to fix it. Attaching for anyone that has a similar problem.

// Attach js handlers when page content is fully loaded (Prototype.js framework)
                Event.observe(window, 'load', function() {

                    // Only attach event listener if the element exists on page
                    if ( $('#{formName}:suggest') ) {                   
                        Event.observe('#{formName}:suggest', 'paste', this.handleMousePaste.bind(this));
                    }   
                });

                // Trigger keyup event when user copies and pastes data into field. (Using mouse to paste will not work without this fix)
                function handleMousePaste(event) {

                    // Need to put a tiny delay in so the element has time to get the pasted in content.
                    setTimeout(function() {this.triggerEvent($('#{formName}:suggest'),'keyup')}, 10);
                }

                // Create custom function that will allow us trigger an event anywhere in our javascript code
                function triggerEvent(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);
                    }
                }

Using addEventListener on Prototype

You need to add your call between a function() {} closure for your listener. Or remove the () after your function name.

This should work: http://jsfiddle.net/9trqK/1/

function Machine(n, p) {
  this.name = n;
  this.price = p;
}
var handle = document.getElementById('myBtn');
Machine.prototype.Dispatch = function () {
  var container = document.getElementById('box');
  container.innerHTML = this.name + " " + this.price;
}
var Drink = new Machine("coke", 80);
handle.addEventListener("click", function() { Drink.Dispatch() }, false);

trigger click event with css selector in prototype

$$('#toolbar-save a')[0].click();

FIDDLE

---

Related Topics