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

Question

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

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

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

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

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

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

6

追加された 28 10月 2011 〜で 09:26 著者 varunvs

ビュー: 9

源

HTMLのインラインJavaScriptの脇には、大きな汚れたハックがあります。それをしないでください。

追加された 28 10月 2011 〜で 10:22, 著者 Raynos, 源

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

追加された 10 12月 2017 〜で 08:46, 著者 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

追加された 28 10月 2011 〜で 10:18 著者 Raynos

源

著者 pimvdb · Answer 1 · 2011-10-28T09:36Z

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

追加された 28 10月 2011 〜で 09:36 著者 pimvdb

源

何の範囲で？ ウィンドウ、ドキュメント、 elem 、 e

追加された 28 10月 2011 〜で 10:20, 著者 Raynos, 源

@pimvb ...それで、私たちはインラインイベントハンドラと汚れたハックを使用しません。誰もがHTMLのjavascriptが大きなノーであることを知っています。

追加された 28 10月 2011 〜で 10:22, 著者 Raynos, 源

は動作しません

追加された 28 10月 2011 〜で 10:24, 著者 Raynos, 源

あなたのコードはES5で厳密に壊れます。理由のために with は推奨されなくなりました

追加された 28 10月 2011 〜で 10:46, 著者 Raynos, 源

@Raynos： window 、 document 、 event 、 e をスコープにするにはどうでしょうか？ with ...より良い方法はありません。

追加された 28 10月 2011 〜で 10:17, 著者 pimvdb, 源

@Raynos：HTMLイベント属性では、属性や document の機能を自動的に取得できます。 ドキュメントなしの getElementById 。の先頭に追加されます。

追加された 28 10月 2011 〜で 10:21, 著者 pimvdb, 源

@レイノス：それは関数自体の中にある必要があります、ありがとう。

追加された 28 10月 2011 〜で 10:31, 著者 pimvdb, 源

@Raynos：それで、 document のプロパティをスコープ内で利用できるようにする手動の方法はないと思います。

追加された 28 10月 2011 〜で 10:49, 著者 pimvdb, 源