2

CustomEventJavascript でシステムがどのように機能するかを理解したいと思います。

[編集2]

夢のソリューションはこちら: http://www.html5rocks.com/en/tutorials/es7/observe/

[/EDIT2]

[編集]

このコードは、DOM私が探している-awareシステムのタイプをかなりよく示しています。@Jared Farrishへのthx、遅延メソッドもあります。しかし、これは一種の JavaScript の制限であり、この言語には賢い方法を実装する価値があると考えています。理想的には、子は親またはその他の要素によって与えられた命令を実行する必要はありません。代わりに、子ノードは、DOM アクティビティの興味深い部分をリアルタイムで知ることによって、独自の決定を行う必要があります。

var body = document.body,
    btn = document.getElementById('fire'),
    warn;

    warn = document.createEvent('CustomEvent');
    warn.initEvent('warning', true, true);

body.addEventListener('warning', function() {
    body.style.backgroundColor = 'blue';
});

btn.addEventListener('warning', function() {
    this.style.backgroundColor = 'green';
});

btn.addEventListener('click', function init() {
    body.dispatchEvent(warn);
    btn.dispatchEvent(warn);
});

ソース: http://jsfiddle.net/p6myjLza/2/

[/編集]

この非常に基本的なイベントを作成すると言います:

var warning = new CustomEvent('warning', { 
    'detail': 'This is a warning!' 
});

オブジェクトwarningに有用なデータが含まれるようになりました。ブラウザのメモリに保存されます。トリガーしましょう。

document.dispatchEvent(warning);

document上記のステートメントを実行することで、 「ねえ、この特定のイベントを起動してください」と言うと思います。そして、イベントがトリガーされます。そして、私が理解している範囲DOMでは、イベントがトリガーされたことを (どういうわけか) が認識していることも意味していると思います。

ここで、イベントがトリガーstyle.backgroundColorされるたびに、body という別の要素を透明から赤に変更したいと思います。warning言い換えれば、私は体がこの特定のイベントに耳を傾け、それに応じて反応することを望んでいます.

document.getElementsByTagName('body')[0].addEventListener('warning',
function(e){
    this.style.backgroundColor = 'red';
}, false);

しかし、これは機能しません。

実際には、1 番目の前に 2 番目を初期化することでdispatchEvent()との位置を切り替えると機能します。addEventListener()しかし、それは私が Javascript に期待するものではありません。私が達成したいのは、どこかでイベントをトリガーし、このイベントがトリガーされるたびにそれをキャッチして反応するように他の場所でいくつかの要素を注文する機能です。

それは達成可能なものですか？

注 : 今日、プロミスを発見し、それは私が探しているものだと思いましたが、遅延させることなく物事を「連鎖」させることができるだけではありません。

4

1 に答える 1

2

あなたはほとんどそれを手に入れました！ただし、documentレベルでイベントをトリガーしてbodyいて、イベント ハンドラーがあるタグはより低い位置にあり、トリガーされるとイベントがバブルアップします。

からイベントをディスパッチするだけbodyで、ハンドラーがトリガーされることがわかります。

document.getElementsByTagName('body')[0].dispatchEvent(warning);
于 2015-04-05T23:58:14.027 に答える