javascript(8):イベントハンドリング

5875 ワード

JavaScript html

ワンロード事件
ユーザがページに入り、すべてのページ要素が読み込みを完了すると、このイベントが起動されます.
ワンロード事件
ユーザーがウェブページを離れると、ワンロードイベント処理プログラムが起動されます.このイベントの最も一般的な用途は、ユーザーが特定の商業サイトを離れるときに広告ウィンドウをイジェクトすることである.
onmoveイベント
ウィンドウが移動すると、Omoveイベントハンドラが起動されます.
onabort事件
ユーザーがウェブページの画像ローディングをキャンセルすると、Onabortイベントハンドラが起動されます.このようなイベントはあまり使われていません.すべてのブラウザがサポートしているわけではありません.
オーロラ事件
ページ上でJavaScriptエラーが発生した場合、Oneerrorイベントハンドラをトリガする場合があります.
➊ヒント
Web上の複雑なページでは、onerror=nullを設定したほうがいいです.ページでこの行のコードを使うと、ある
いくつかのエラーメッセージはユーザに表示されません.このようにユーザは干渉が少なくなります.
ブラウザ
onfocus事件
onfocusとonblur事件処理プログラムは互いにミラーリングしています.まるでJavaScriptプログラムで夜中まで奮闘するように聞こえます.一つのページが一番前のアクティブウィンドウになると、Ofocus処理プログラムが起動されます.


  onfocus              
<!DOCTYPE html>
<html>
<head>
<title>Always in Back</title>
<script src="script03.js"></script>
</head>
<body>
<h1>Unimportant content that should
never be in front</h1>
</body>
</html

  
window.onfocus = moveBack;
function moveBack() {
self.blur();
}

オンブラ事件
ウィンドウが他のすべてのウィンドウの前に表示されますように.



<!DOCTYPE html>
<html>
<head>
<title>Always in Front</title>
<script src="script04.js"></script>
</head>
<body>
<h1>Important content that should always be in front</h1>
</body>
</html>

window.onblur = moveUp;
function moveUp() {
self.focus();
}
  
      ，               。                 
  ！
                ，           8-6，           ，
           。
       onblur             ：                 
          ，          ，             。   
               Web   ，                   
    。

マウスのイベントを処理
onmousedownイベントはマウスを押すとトリガします.
右クリック禁止事件です.


<!DOCTYPE html>
<html>
<head>
<title>onMousedown capture</title>
</head>
<body>
<h1>Important source data that someone might want to look at.</h1>
<script>
//onmousedown       
//               ，                  ，    。
if(typeof document.oncontextmenu == "object"){
	if(document.all){
		document.onmousedown = captureMousedown;
	}else{
		document.oncontextmenu = captureMousedown;//       Safari
	}
}else{
	window.oncontextmenu = captureMousedown;//  
}
/*
               Firefox，       window.oncontextmenu（     
 document.oncontextmenu）。     Firefox，   document.all，          IE  
     。    IE，    onmousedown    captureMousedown()。
 */
function captureMousedown(evt){//evt    。         
	if(evt){
		var mouseClick = evt.which;
	}else{
		var mouseClick = window.event.button;
	}
	//1：      2：IE      3：      
	if(mouseClick==1||mouseClick==2||mouseClick==3){
		alert("Menu Disabled");
		return false;
	}
}
/*
  evt     ，       evt.which              。      IE，
         window.event.button    。       ，      mouseClick    。
 */
</script>
</body>
</html>

onmouseup事件
onmousedownイベントと同様に、onmouseupイベントはユーザーがマウスをクリックしてボタンを放した時にトリガされます.
オモスク事件
ページの訪問者がマウスを移動すると、onmousemoveイベントが発生します.この例では、マウスに沿っていくつかのアイコンを移動することができるとユーザーに感じさせます.
onmouseover事件
マウスが移動したら登録します.
onmouseoverイベントハンドラのエリアにいると、このイベントが発生します.
onmouseout事件
もちろん、onmouseoverがある以上、対応するonmouseoutもあります.このイベントが登録されているエリアからマウスが離れると、このイベントが起動されます.
ondblclick事件
次のスクリプトは、ある画像をダブルクリックして新しいウィンドウを作成します.


<!DOCTYPE html>
<html>
<head>
<title>Image Popup</title>
<link rel="stylesheet" href="script07.css">
<script src="script07.js"></script>
</head>
<body>
<h3>Double-click on an image to see the full-size version</h3>
<img src="images/Img0_thumb.jpg" alt="Thumbnail 0" id="Img0">
<img src="images/Img1_thumb.jpg" alt="Thumbnail 1" id="Img1">
<img src="images/Img2_thumb.jpg" alt="Thumbnail 2" id="Img2">
</body>
</html>

window.onload = initImages;
function initImages() {
for (var i=0; i<document.images.length;i++) {
document.images[i].ondblclick = newWindow;
}
}
function newWindow() {
var imgName = "images/" + this.id + ".jpg"
var imgWindow = window.open(imgName,"imgWin", "width=320,height=240,scrollbars=no")
}

onclick事件
フォームイベント処理
ワンストップ事件
オンスロット事件
ユーザーがフォーム上のResetボタンをクリックすると
オンチャン事件
フォームフィールドをユーザーが変更すると、オンチャンゲイベントハンドラが起動されます.これはすぐに調べるのに使います.
ユーザーがSubmitボタンをクリックする前にユーザの選択に応答します.
オンラインイベント
ユーザーがinputまたはtextareaフォーム領域のテキストを選択すると、onselect処理プログラムが起動されます.
onclick事件
オンブラ事件
onfocus事件
キーイベント処理
onkeydown事件
ユーザが適切なキーを押した時に対応する操作を行います.


document.onkeydown = keyHit;
function keyHit(){
	if(evt){
		var thisKey = evt.which;
	}else{
		var thisKey = window.event.keyCode;
	}
}
                       。   Firefox  Safari，   evt.which，          。   IE，       window.event. keyCode  。       ，       thisKey  。

onkeyup事件
Okeyupイベントハンドラはonkeydownと同じで、唯一の違いは、ユーザーがキーを押して、このキーをリリースしている時に触発されたのです.
ワンカット事件
ユーザーがキーを押した時と、このキーをリリースした時に、ワンキーイベントを起動します.

HTML「ハイパーリンク」におけるhrefとonclickの戸惑いについて