HTML、Javascriptのカスタムイベント

HTML、JSでカスタムイベントを作成しようとしています。

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

どのようにそのようなものを作成できますか? 'oncustombind'は作成したいカスタムイベントです。 oncustombind属性で定義された関数/コードを呼び出すことができるはずです。また、いくつかのデータをイベントオブジェクトに渡す必要があります。

私はjquery、YUIのようなライブラリを使用したくありません。

どんな助力も深く感謝します。

6
HTMLのインラインJavaScriptの脇には、大きな汚れたハックがあります。それをしないでください。
追加された 著者 Raynos,
質問が掲載されてから時間が変わった。現在、Webコンポーネントはjsフレームワークを置き換える実行可能な方法になっています。インラインのカスタムイベントを使用すると、実際に読みやすく(角度/反応に似た)コードを書くのに本当に便利です。 1つのすばらしいトリックは、 Object.assign を使用して、Webコンポーネントの this コンテキストをchidlren dom要素と共有することです。このようにして、選択されたすべてのDomエレメントは、Webコンポーネントクラスで定義されたメソッドにアクセスできます。インラインカスタムイベントハンドラからカスタムイベントにアクセスすることは、さらにうまくいくでしょう。
追加された 著者 Adrian Moisa,

2 答え

You want a CustomEvent

それらは使いやすいものでなければならないが、ブラウザのサポートは貧弱である。しかし、 DOM-shim はそれを修正する必要があります。

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

new Functionwith を使用するのは悪い習慣ですが、これは次のように行うことができます: 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);
}

次のHTMLを使用します。

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

次のようなイベントをトリガーします:

trigger(document.getElementById('x'), 'custombind', {foo: 123});
4
追加された
何の範囲で? ウィンドウドキュメントeleme
追加された 著者 Raynos,
@pimvb ...それで、私たちはインラインイベントハンドラと汚れたハックを使用しません。誰もがHTMLのjavascriptが大きなノーであることを知っています。
追加された 著者 Raynos,
追加された 著者 Raynos,
あなたのコードはES5で厳密に壊れます。理由のために with は推奨されなくなりました
追加された 著者 Raynos,
@Raynos: windowdocumentevente をスコープにするにはどうでしょうか? with ...より良い方法はありません。
追加された 著者 pimvdb,
@Raynos:HTMLイベント属性では、属性や document の機能を自動的に取得できます。 ドキュメントなしの getElementById 。の先頭に追加されます。
追加された 著者 pimvdb,
@レイノス:それは関数自体の中にある必要があります、ありがとう。
追加された 著者 pimvdb,
@Raynos:それで、 document のプロパティをスコープ内で利用できるようにする手動の方法はないと思います。
追加された 著者 pimvdb,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript