タグ：addeventlistener：記事一覧

JavaScriptを学んでいるとコールバックとイベントリスナーという言葉を耳にします。どちらも関数で、メソッドの引数として用いられているので違いが判らず、戸惑ってしまいます。そこで両者の違いを調べてみました。

htmlのonclick属性は要素をクリックしたときに実行したい処理を記述することができます。しかし、クリックされた要素に対して少し複雑な処理をしたいときは、thisやargumentsオブジェクトを効果的に使用します。

DOM要素をクリックした時に処理をおこないたいとき、onclickまたはaddEventListenerで処理内容を登録することができます。しかしこの二つの方法は何が異なるのか明示されていることが少ない。そこで今回は、onclickとaddEventListenerの違いについてお伝えします。

JavaScriptで文字の入力を監視したいとき、keydownやkeyup・inputなど複数のイベントを使用できます。そこで今回は、それぞれのイベントの違いと、コード例をお伝えします。

JavaScriptでDOM要素を操作する場合、addEventListener()メソッドを使用します。このメソッドの第三引数にtrueをセットしているコードをよく目にします。しかしtrueでもfalseでも同じように動作するので、どんな意味があるのかわからない人も多いのではないでしょうか。そこで今回は、addEventListener()メソッドの第三引数についてお伝えします。

addEventListenerで登録したイベントリスナーの引数は、targetとcurrentTargetというプロパティを持っています。どちらもイベントに関連したDOM要素を指していますが、どのような要素を指しているのかすぐに忘れてしまうのでメモしておきます。

今回はブラウザにファイルをドロップしたときの制御をJavaScriptでおこなってみます。ドロップエリア外にファイルがドラッグされたら、ドロップを無効にします。