JavaScript / イベント

イベント登録

var hoge = document.getElementById("hoge");
hoge.addEventListener("click", function(e){
    var obj = e.target;  // これが発生源
});

ちなみにイベントにはバブリングという概念があるので、イベント発生源と Listener が一致するとは限らない。

この第二引数で与えている 関数 は最終的には hoge のプロパティとして登録されるので、 この内部での this は登録されたオブジェクト(今の場合なら hoge)となる。

これは若干わかりにくい挙動ではあるので発生源は e.target で取得し、登録にはアロー関数を使って this をこのコンテキストで拘束しておくとよい。

イベントの種類

DOM の構築が完了したら JavaScript/イベント/DOMContentLoaded
要素に対してペースト操作したら JavaScript/イベント/paste

デフォルトの動作のキャンセル

ブラウザに元から備わっている動作をイベントで捉えて止めたい場合がある。

クリップボードをペーストした時に内容だけ貰って、実際にはペーストしないみたいなことをしたい。

このような場合は preventDefault メソッドを使うと動きを停止できる

mytextarea.addEventListener("paste", function(e){
    e.preventDefault();
});

jQuery 等の仕様で return false すれば止まるみたいなこと書いているページも多いが、addEventListener においては return false しても止まらない。

一部のイベントではこのデフォルトの挙動抑止記述を無視するのがデフォルトになっていたりするので注意が必要である。

javascript/ope/dom_ope/event/start.txt · 最終更新: 2020-09-29 12:13 by ore