イベント
イベントの概念
イベントは通知され、完了するまでリッスンされ、最初にリッスンし、次に対応する関数を通知して実行します。
イベントのリスニングを完了するには、イベントのタイプが同じであること、イベントがリスニングされるオブジェクトとイベントがスローされるオブジェクトが同じであること、リスニングされているオブジェクトにイベントをスローするには、まずリスニングしてからスローすれば十分であること、などの要素が必要です。イベントの中には、システムが自動的にスローするシステム・デフォルト・イベントもあります。
document.addEventListener('aa',eventHandler);
function eventHandler(e){console.log(e)}
//イベントを聞く
var evt = new Event('aa')//同じタイプのイベントオブジェクトを作成し、イベントのタイプは文字列でなければならない。
document.dispatchEvent(evt)//イベントを投げる
イベントリスニングは、別のシステムにコードを分離するのに役立ちます、あなたはお互いにいくつかのパラメータを渡すことができます、コードの一部が削除された場合でも、コードのエラーが報告される現象はありません。
イベント原理
event object.addEventListener(イベントタイプ、イベントコールバック関数、ステージをキャプチャするかどうか、) デフォルトのキャプチャステージはfalseです。
イベント・オブジェクトは、EventTarget またはそれを継承したサブクラスでなければなりません。
イベントの原則：イベントは、キャプチャフェーズ、ターゲットフェーズ、バブリングフェーズの3つのフェーズを通過します。捕捉段階は外側から内側へ、目標段階は目標に到達し、泡立ち段階は内側から外側へ。
e.currentTarget e.currentTargetイベント、すなわち thisのイベントリスナー。
e.targetはe.scrElementまたはe.toElementと等価で、イベントクリックのターゲットです。
e.stopPropagation() バブリング停止
e.cancelBubble=true IE互換イベント。
イベントの互換性
var div = document.querySelector('div');
div.addEventListener('click',clickHandler,{once:true});
function clickHandler(e){
//削除イベントリスニング
this.removeEventListener('click',clickHandler);
this.removeEventListener('click',arguments.callee)
}//IE8
div.addEventListener('click',clickHandler)//IE8互換性がない
div.attachEvent('onclick',clickHandler)//IEに対応
div.removeEventListener('click',clickHandler)//IE8互換性がない
div.detachEventListener('onclick',clickHandler)//IEに対応
イベント対応方式の長所と短所
1、addEventListener
欠点：IE8以下はサポートされていません。
利点：キャプチャとバブリングフェーズを別々にリスニングするサポート、イベントスローのサポート、同じイベントに対する複数のイベントコールバック関数のサポート、イベント使用時の関数とコンテンツの完全な分離。
2、アタッチイベント
欠点：IE8+はサポートされていません、キャプチャなし、ワンクリックをサポートしていません、将来的に廃止されるでしょう。
長所：IE8までサポートし、複数のコールバック関数を一度に呼び出すことができます。関数をコンテンツから完全に分離するために時間を使用することができます。
3. onclick=fn
長所：フルブラウザ対応、互換性問題なし、便利なコード
欠点：イベントを投げるメカニズムをサポートしていない、あなただけのシステムのデフォルトのイベントを使用することができます、同じイベントの同じ要素は、複数のコールバック関数をサポートしていないため、コード無名関数の使用の多くは、コールバック地獄を引き起こすことが容易で、コードの開発は、実際の関数から分離することはできません。
イベントオブジェクト
e.タイプ イベントタイプ クリック
e.target e.srcElement time ターゲットオブジェクト
e.currentTarget thisイベントリスナーオブジェクト
e.cancelBubbleはバブリングのキャンセルを設定します。
var evt = new Event('aa') イベントオブジェクトの作成
このオブジェクトは、listenコールバック関数のパラメータを設定するeに相当します。
イベントタイプ
イベント
チェンジイベント
フォームのみ
<input type="text" id="user">
<select multiple>
<option> </option>
<option>西安</option>
<option> </option>
<option>天津</option>
<option> </option>
</select>
var user = document.querySelector('#user');
var select=document.querySelector("select")
user.addEventListener('change',changeHandler)
select.addEventListener('change',changeHandler)
入力のchangeイベントは、input.valueが変化してフォーカスが外れたときに発生します。
イベント選択
主にテキスト内の入力またはtextAreaのために、イベントのテキストコンテンツのテキストボックスの選択がトリガされたときに、ドロップダウンメニューでは、選択とは何の関係もありません。
var user = document.querySelector('#user');
user.addEventListener('select',selectHandler);
function selectHandler(e){
// console.log(input.selectionStart);選択された値の開始位置添え字
// console.log(input.selectionEnd); 選択された値の終了位置添え字
//console.log(user.selectionDirection);//選択方向
console.log('a')
}
ロードイベントとエラーイベント
イメージの読み込みに使用され、Ajax通信やJSONまたは他のファイルのロードロードが正常にロードされ、エラーがロードされたエラーは、ページのすべての要素がロードされたときにロードがトリガされ、コンテンツがあまりにも多くのロードイベントが非常に長くなる場合は、一般的に書き込まないでみてください。
window.addEventListener("load",loadHandler);
function loadHandler(){
console.log(e)
}
window.onload=function(){
console.log(e)
}
イベントの送信とリセット
フォームフォームのみをリッスンできます；
<form action="http://..om" method="GET">
<input type="text" name="user">
<input type="password" name="password">
<input type="submit">
<input type="reset">
</form>
form.addEventListener("submit",submitHandler);
form.addEventListener("reset",submitHandler);
function submitHandler(e){
e.preventDefault();// e.returnValue=false 対応文体
console.log(e);
}// デフォルトイベントをブロックする
リサイズイベント
windowとtextAreaのイベント。
window.addEventListener("resize",resizeHandler);
function resizeHandler(e){ console.log(document.documentElement.clientWidth)
}
scroll イベントは、スクロールバーの位置が変化したときに発生します。
document.addEventListener("scroll",scrollHandler);
function scrollHandler(e){
console.log('e')
}
アンロード・イベント
ウィンドウが閉じられたとき、または元のページが更新されたときにトリガーされます。
e.preventDefault()では、アンロード・イベントをブロックできません。
window.addEventListener("unload",unloadHandler);
function unloadHandler(){
consloe.log(e)
}
ポップステートイベント
ポップステート・イベント
履歴がロールバックおよびフォワードされたときにトリガーされます。
document.addEventListener("click",clickHandler);
window.addEventListener("popstate",popstateHandler)
function clickHandler(e){
history.pushState({a:1},"","#1");
}
function popstateHandler(e){
console.log(e);
}
マウスイベント
var div=document.querySelector(".div0");
div.addEventListener("mousedown",clickHandler);//マウスを押す
div.addEventListener("mouseup",clickHandler);//マウスを離す
div.addEventListener("click",clickHandler);//マウスの左クリック
div.addEventListener("dblclick",clickHandler)//マウスの左ボタンをダブルクリックする
div.addEventListener("mouseover",clickHandler);//マウスオーバー
div.addEventListener("mouseout",clickHandler);//マウスのスライドアウト
div.addEventListener("mouseenter",clickHandler);//マウスオーバー
div.addEventListener("mouseleave",clickHandler);//マウスオフ
// mouseover mouseoutバブル機能を使用すると、バブルイベントの子要素の内外にマウスのスライドを受け取ることができる。
// mouseenter mouseleaveイベント受信の役割を果たすオブジェクトだけを聞く。
div.addEventListener("mousemove",mouseHandler);//マウスオーバー
div.addEventListener("contextmenu",mouseHandler);//右クリックメニュー
マウスイベントの共通プロパティ
console.log(e.clientX,e.ClientY)//可視領域の左上隅からの距離
console.log(e.layerX,e.layerY)// 対象オブジェクトが位置決めされている場合、オフセットと同様の値になり、対象オブジェクトが位置決めされていない場合、位置決めされた親コンテナの左上隅の位置になる。
console.log(e.offsetX,e.offsetY)//イベント対象オブジェクトの左上隅に相対する。
console.log(e.movementX,e.movementY)//マウスを動かした時の距離の相対位置。
console.log(e.pageX,e.pageY)//ページの左上隅を基準とする
console.log(e.screenX,e.screenY)//画面左上を基準にする
console.log(e.x,e.y)//clientX、clientYと同じ。
altKey:false, crtlKey:false, metaKey:false, shiftKey:false;//キーボードの対応するキーを押すとtrueになる；
buttonイメージをドラッグ＆ドロップするとアイコンが表示される。,which//マウスダウンイベントの属性は、押されたキーを判定し、キー属性の値が異なる。
フォーカスと入力イベント
var input1=document.querySelector("#input1");
input1.addEventListener("focus",focusHandler);//入力にフォーカスが当たった場合
input1.addEventListener("blur",focusHandler);//入力がフォーカスを失った場合
console.log(e.relatedTarget)//要素のフォーカスを取得する
input1.addEventListener("input",inputHandler);//入力内容が変更された場合、継続的に発生する。
console.log(e.data)//入力内容
consloe.log(e.inputType)//insertText" 入力insertCompositionTextの種類には、テキストの挿入、テキストの削除、入力テキストの挿入、テキストのカット＆ペーストなどがある。
consloe.log(e.isComposing)テキストか否かを問わない
キーボードとマウスホイールのイベント
キーボードイベント
document.addEventListener('keydown',keyHandler);
//キーボードから
document.addEventListener('keyup',keyHandler);
//キーボードキーを離すと
document.addEventListener('keypress',keyHandler);
//キーボードを押して離す
//キーボードのaを押すと、以下のデータが表示され、異なるキー変更に基づいている。
e.code: "KeyA"
e.key: "a"
e.keyCode: 65
e.which: 65
マウスホイールイベント
window.addEventListener('mousewheel',wheelHandler);
//Google、IE、その他のブラウザ
window.addEventListener('DOMMouseScroll',wheelHandler)//ファイアフォックス
//マウスホイールイベントがトリガーされた場合、いくつかのプロパティをアップする
deltaX: -0
deltaY: -100
deltaZ: 0
detail: 0
wheelDelta: 120
wheelDeltaX: 0
wheelDeltaY: 120
//Firefoxの場合、詳細は-3。
デフォルトのイベント使用をブロック
1、フォームの送信とリセットは、デフォルトのイベントをブロックするために使用する送信とリセットをキャンセルすることができます。
var form=document.querySelector("form");
form.addEventListener("submit",formHandler);
form.addEventListener("reset",formHandler);
function formHandler(e){
e.preventDefault();
}
2、contextmenuイベントを使用すると、マウスの右ボタンポップアップメニューをキャンセルすることができます
document.addEventListener("contextmenu",mouseHandler);
function mouseHandler(e){
e.preventDefault();
}
3、要素に対してドラッグ＆ドロップするとき、要素の中にテキストがあると、テキストが選択されます。
var div=document.querySelector("div");
document.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
e.preventDefault();
}
4.イメージドラッグ時のアイコンのドラッグを禁止します。
var img=document.querySelector("img");
img.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
e.preventDefault();
}
