JavaScript ラーニングノート - イベント #JavaScript

EVENT

onclick / onload / onscroll / ... などのイベントを理解するだけです。
今日から、いくつかの出来事を詳しく学びましょう

どんなイベントですか？

イベントの内容
- 誰のイベントがトリガーされたのか：イベントの発生源
- トリガーされるイベント：イベントタイプ
- トリガー後の処理：イベントハンドラ関数

<body>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 <script>
 var oUl = docuemnt.querySelector('ul')
 oUl.addEventListener('click', function (e) {
 console.log(' ul のクリックイベントがトリガーとなった。')
 })
 </script>
</body>

divがクリックされた後に何かしたい場合は、イベントハンドラにその内容を記述します。

<body>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 <script>
 var oUl = docuemnt.querySelector('ul')
 oUl.addEventListener('click', function (e) {
 e = e || window.event
 var target = e.target || e.srcElement
 console.log(target)
 })
 </script>
</body>

divがクリックされると、イベントハンドラ内のコードが実行されます。
クリックされるたびに、イベントハンドラが実行されます。

イベントオブジェクト

イベントオブジェクトとは何ですか？
イベントをトリガーしたときに、そのイベントを説明する情報です。
例
- クリックイベントをトリガーしたとき、どこをクリックし、その座標は？
- キーボードイベントをトリガーしたとき、どのボタンを押しましたか？
- ...
各イベントには、その情報を記述する対応するオブジェクトがあり、これをイベント・オブジェクトと呼びます。
ブラウザはwindow.eventと呼ばれるブラックボックスを表示します。
- 例えば
- 0, 0をクリックした場合、得られるイベントオブジェクトはその点のプロパティを持ちます。
- 10, 10をクリックした場合、得られるイベントオブジェクトはその点のプロパティを持ちます。
- ...

<body>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 <script>
 var oUl = docuemnt.querySelector('ul')
 
 oUl.addEventListener('click', function (e) {
 e = e || window.event
 var target = e.target || e.srcElement
 
 // 何をクリックしたかを判断する
 if (target.nodeName.toUpperCase === 'LI') {
 	// 必ず
 // ulをクリックすると、nodeNameは'UL'
 // liをクリックしたときにすべきことをしに行く
 console.log(' liクリックされた')
 }
 })
 </script>
</body>

これは素晴らしいものですが、一般的に言って、素晴らしいものには 互換性の問題がつきものです。
低バージョンのIEではうまくいきますが、高バージョンのIEやChromeではうまくいきません。
別の方法で イベントオブジェクトを取得する必要があります。
各イベント・ハンドラの行参照位置では、デフォルトで最初のものが イベント・オブジェクトになります。


<a href="https://..om">クリックして試す</>
<script>
 var oA = document.querySelector('a')
 a.addEventListener('click', function (e) {
 e = e || window.event
 console.log(this.href)
 e.preventDefault ? e.preventDefault() : e.returnValue = false
 })
</script>

まとめると、今後すべてのイベントでイベントオブジェクトを取得したい場合は、互換性のある書き方を使用します。

クリックイベントのカーソルポイント取得

ちょうど今、つまり点の座標を取得することができます、次に点の座標を取得する方法を学びます
各クリックイベントの座標点は対ではありません。
例
- 相対イベントソース
- 相対ページ
- 相対ブラウザウィンドウ
- ...
両者は異なるため、 イベント・オブジェクトの プロパティも異なります。

クリックした要素からの相対位置

offsetXおよびoffsetY
は、クリックした要素に対するボーダーの内側からカウントされます。

ブラウザウィンドウに対するクリックした点の座標

クライアントXとクライアントY
はブラウザのウィンドウを基準に計算されるため、ページをどこまでスクロールしても、座標はウィンドウの

座標をクリックしたページ上のポイントからの相対距離

ページXとページY
は、スクロールの有無にかかわらず、ページ全体に対する相対座標点であり、ページが取得する座標点に対する相対座標点です

ページ左上によると
- マージンレフトは30
- 左のボーダーは10
- 左右のパディングは20
- コンテンツエリアは003
- pageX : 300 + 20 + 20 + 10 + 30 = 083
- マージントップは20
- 上部ボーダーは10
- 上下のパディングは20
- コンテンツエリアは003
- ページY : 300 + 20 + 20 + 10 + 20 = 072

ボタン情報をクリック

マウスには通常、左ボタンと右ボタンの2つのボタンがあります。
この情報は、左ボタンと右ボタンのどちらをクリックしたかを決定するイベントオブジェクトでも得られます。
はマウスの左ボタン、右ボタンは

一般的なイベント

ページを書くときによく使われるイベントの例
ブラウザイベント 、マウスイベント、キーボードイベント、フォームイベント、タッチイベントに大別されます。
全部覚える必要はありませんが、おそらく知っておくべきでしょう。

ブラウザイベント

load ：ページのすべてのリソースがロードされます。
scroll : ブラウザがスクロールしたときに発生
...

委任

click : クリックイベント
dblclick : ダブルクリックイベント
contextmenu : 右クリックイベント
mousedown : マウスの左ボタンを押したイベント
mouseup ：マウス左ボタン上イベント
mousemove ：マウス移動
mouseover : mouseoverイベント *mouseout : mouseoutイベント
mouseenter : マウスオーバーイベント
mouseleave : マウス離脱イベント
...

キーボードイベント

keyup : キーアップイベント
keydown : キーボード・ダウン・イベント
keypress ：キーボードを押して持ち上げるイベント
...

フォームイベント

change : フォームの内容変更イベント
input : フォーム内容の入力イベント
submit : フォームの送信イベント
...

タッチイベント

touchstart : タッチ開始イベント
touchend : タッチ終了イベント
touchmove ：タッチムーブ・イベント
...

キーボードイベント

マウス・イベントについて学んだので、次はキーボード・イベントについて説明しましょう。
キーボード・イベント内で行う主なことは、次の2つです。
- どのボタンがクリックされたかを判定
- Shift + a / Ctrl + b / ... のようなキーの組み合わせはありません。
最初に明らかにすべきことは、すべての要素がキーボード・イベントにバインドできるかどうかということです。
- イベントに関して重要なことは、誰がイベントを引き起こしたかということです。
- div要素がページ上にありますが、そのdivにキーボードイベントをトリガーさせるにはどうすればよいですか？
- そのため、一般的には、ページ上で選択可能な要素やドキュメントにのみキーボードイベントをバインドすることができます。

OKボタン

キーボードの各キーには個別のコードがあります。
どのボタンが押されたかを判断するのはこのコードです。
EventObject.keyCodeまたはEventObject.whichで取得します。
なぜ2つあるかというと、FireFox 2.0がキーコードをサポートしていないためです。

一般的なキーボードコード

8: Deleteキー
9: テーブルメイキング
13: Enterキー
16: アップシフトキー
17: Ctrlキー
18: altキー
27: キャンセルキー
32: スペースキー
...

キーコンビネーション

最も重要な組み合わせは、alt/shift/ctrlキーです。
キーをクリックしたときに3つのキーが押されているかどうかを判断し、押されていれば組み合わせ、押されていなければ組み合わせではありません！
また、イベントオブジェクトは3つのプロパティを提供します。
- altKey: altキーが押されていればtrue、そうでなければfalse。
- shiftKey: シフトキーが押されていればtrue、そうでなければfalse。
- ctrlKey : ctrlキーが押されていればtrue、押されていなければfalse。
プレスされているかどうかは、次の3つの属性で判断できます。

イベントの結合方法

現在、イベントの登録はonxxxを使って行われます。
しかし、この方法はあまり良くありません。
2つ目のイベントが書き込まれると、1つ目のイベントは上書きされます。

イベントを要素にバインドするイベントリスナーの方法もあります。
を追加するには addEventListener メソッドを使用します。
IEではattachEventを使用する必要があります。

イベントリスナー

addEventListener : IE 7 8 では使用しません。
文法：

私が最初のイベントであることを印刷し、次に私が2番目のイベントであることを印刷します。
注意：イベントタイプにonと書かないでください。クリックイベントはonclickではなくclickです。
attachEvent ：IE 7 8で使用。
構文：element.attachEvent('イベントタイプ', イベントハンドラ関数)

私が2番目のイベントであることを表示し、次に私が1番目のイベントであることを表示します。
注：イベントタイプにはon、クリックイベントにはonclickと記述する必要があります。

つのアプローチの違い

イベント登録時にイベントタイプのパラメータを書き込みます。
- addEventListener ：書き込まない
- attachEvent ：書き込む
パラメータ数
- addEventListener ： 3つの共通パラメータ。
- attachEvent ：パラメータ2つ
実行順序
- addEventListener : 順番に登録、順番に実行。
- attachEvent : 順番に登録、逆順に実行
適用ブラウザ
- addEventListener ： IE 7 8 以外のブラウザ
- attachEvent ： IE 7 8 ブラウザ

JavaScript ラーニングノート - イベント

EVENT

どんなイベントですか？

イベントオブジェクト

クリックイベントのカーソルポイント取得

クリックした要素からの相対位置

ブラウザウィンドウに対するクリックした点の座標

座標をクリックしたページ上のポイントからの相対距離

ボタン情報をクリック

一般的なイベント

ブラウザイベント

委任

キーボードイベント

フォームイベント

タッチイベント

キーボードイベント

OKボタン

一般的なキーボードコード

キーコンビネーション

イベントの結合方法

イベントリスナー

つのアプローチの違い

Read next

Androidは、これらの落とし穴の波の支払いについて

css-backgroundプロパティの詳細

Vue開発日記, ダイアログコンポーネントをラッピングする

Python関数とファイル操作集（長編シリーズ第3回）

Vue3レスポンシブ原則＋手書きリアクティブ

XLogログコンポーネントの学習と使用