Custom event in HTML, Javascript - Stack Overflow

admin管理员组

文章数量:1435859

I'm looking to create a custom event in HTML, JS.

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

How can I create one such? 'oncustombind' is the custom event I want to create. I should be able to call the function/code defined in the oncustombind attribute. Also, I need to pass some data to the event object.

I don't want to use any libraries such as jquery, YUI.

Any help would be deeply appreciated.

I'm looking to create a custom event in HTML, JS.

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

How can I create one such? 'oncustombind' is the custom event I want to create. I should be able to call the function/code defined in the oncustombind attribute. Also, I need to pass some data to the event object.

I don't want to use any libraries such as jquery, YUI.

Any help would be deeply appreciated.

• javascript
• html
• events
• custom-event

Share Improve this question Follow asked Oct 28, 2011 at 9:26 varunvsvarunvs 89511 gold badge1212 silver badges2424 bronze badges 2

• 2 As an aside inline javascript in HTML is a big dirty hack. Don't do it. – Raynos Commented Oct 28, 2011 at 10:22
• 2 Since the question was posted times have changed. Currently web components are becoming a viable way to replace js frameworks. Having inline custom events would be actually really useful for writing code that can be easily read (similar to angular / react). One nice trick is to share the this context of the web component with the chidlren dom element using Object.assign. In this way any selected Dom element can have access to methods defined in the web components class. It would be even nicer to have access to custom events from inline custom event handlers. – Adrian Moisa Commented Dec 10, 2017 at 8:46

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 11

You want a CustomEvent

They should be easy to work with but browser support is poor. However the DOM-shim should fix that.

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

It's bad practice to use new Function and with, but this can be accomplished as follows: 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);
}

With the following HTML:

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

then trigger the event like:

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

本文标签： Custom event in HTMLJavaScriptStack Overflow