Evento personalizado en HTML, Javascript

Question

Estoy buscando crear un evento personalizado en HTML, JS.

<input type="text" oncustombind="foo(event);" /> 

¿Cómo puedo crear uno? 'oncustombind' es el evento personalizado que quiero crear. Debería poder llamar a la función/código definido en el atributo oncustombind. Además, necesito pasar algunos datos al objeto del evento.

No quiero utilizar ninguna biblioteca como jquery, YUI.

Cualquier ayuda sería muy apreciada.

Answer 1

¿Quieres una CustomEvent

Deben ser fáciles de trabajar, pero el apoyo del navegador es pobre. Sin embargo, el DOM-shim debería arreglar eso.

var ev = new CustomEvent("someString"); 
var el = document.getElementById("someElement"); 
el.addEventListener("someString", function (ev) { 
    // should work 
}); 
el.dispatchEvent(ev); 

Answer 2

Es una mala práctica usar new Function y with, pero esto se puede lograr de la siguiente manera: http://jsfiddle.net/pimvdb/72GwE/13/.

function trigger(elem, name, e) { 
    var func = new Function('e', 

     'with(document) {' 
    + 'with(this) {' 
    + elem.getAttribute('on' + name) 
    + '}' 
    + '}'); 

    func.call(elem, e); 
} 

con el siguiente HTML:

<input type="text" oncustombind="console.log(e, type, getElementById);" id="x"> 

después dispare el evento como:

trigger(document.getElementById('x'), 'custombind', {foo: 123});