JavaScript高級プログラム設計の知識点イベントとスクリプトの処理
11732 ワード
1.イベントハンドラ
イベントとは、ユーザまたはブラウザ自身が実行する何らかのアクションであり、処理プログラムの名前がonから始まります.
1)イベント変数により、直接イベントオブジェクトにアクセスできる:onclick=「alert(event.type)」出力click;this変数により、ターゲット要素にアクセスできます.
次のような方式に変えたら避けられます.
第一の方法:
2.イベントの種類
1)UIイベント
1.load:ページが完全にロードされた後、windowの上でトリガされ、すべてのフレームがロードされた時にフレームセットから出発し、画像のロードが完了した時に、cdでトリガされます.
3.abort:ユーザーがダウンロードを停止した時
2)フォーカスイベント
1.blur:元素が焦点を失うとトリガになります.
2.focus:元素またはゴムテレビがトリガされる時
3)マウスとホイールイベント
1.lick:マウスの左ボタンをクリックするか、バックボタンを押すかはトリガです.
2.dblclick:マウスの左ボタンをダブルクリックする
3.mouseout:
4.mouseover
5.マウスイベントをトリガするのは、イベントの座標属性です.
ブラウザのビューエリアの水平と垂直座標(clientX、clientY)
ページ座標位置(ブラウザ左上角相対)(PageX、PageY)
コンピュータのスクリーン座標位置:(screenX、screenY)
6.event.keyCode:キーボードボタンのASCII値
3.メモリと性能
1)イベント依頼:ある親要素の中に複数のサブ要素が同じイベントに応答すると、このイベントを親要素に依頼し、接続の回数を制限し、ターゲット・idを判断して区別する.このようにDOM元素だけを取得してメモリを節約します.
HTMLではフォームは
イベントとは、ユーザまたはブラウザ自身が実行する何らかのアクションであり、処理プログラムの名前がonから始まります.
1)イベント変数により、直接イベントオブジェクトにアクセスできる:onclick=「alert(event.type)」出力click;this変数により、ターゲット要素にアクセスできます.
<input type="button" value="feng" onclick="alert(this.value)"/>// feng次のような方式に変えたら避けられます.
<input type="button" value="Click me" onclick="try{showMessage();}catch(ex){}"/>第一の方法:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<script>
window.onload=function(){// ， window JS ， btn null，
var btn = document.getElementById("myBtn");
var handler = function(event){
switch(event.type){
case "click":
alert("Click");
break;
case "mouseover":
event.target.style.backgroundColor = "red";
break;
case "mouseout":
event.target.style.backgroundColor = "";
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;
}
</script>
</head>
<body>
<input id="myBtn" type="button" value="Click me"/>
</body>
</html> EventUil.addHandler(window,"load",function(event){
// ， ， script
var img = document.createElement("img");
// onload ，
EventUil.addHandler("img","load",function(event){
<span style="color:#ff0000;">event = EventUtil.getEvent(event);</span>
alert(EventUtil.getTarget(event).src)
// ， src
document.body.appendChild(image);
// src
image.src = "smile.gif";
})
})2.イベントの種類
1)UIイベント
1.load:ページが完全にロードされた後、windowの上でトリガされ、すべてのフレームがロードされた時にフレームセットから出発し、画像のロードが完了した時に、cdでトリガされます.
<!-- ， windows.load=function, body ，
window.onload=function(){ alert("aaa");}
aaa, feng -->
<body onload = "alert('feng')">
<input id="myBtn" type="button" value="Click me"/>
</body>3.abort:ユーザーがダウンロードを停止した時
2)フォーカスイベント
1.blur:元素が焦点を失うとトリガになります.
2.focus:元素またはゴムテレビがトリガされる時
3)マウスとホイールイベント
1.lick:マウスの左ボタンをクリックするか、バックボタンを押すかはトリガです.
2.dblclick:マウスの左ボタンをダブルクリックする
3.mouseout:
4.mouseover
5.マウスイベントをトリガするのは、イベントの座標属性です.
ブラウザのビューエリアの水平と垂直座標(clientX、clientY)
ページ座標位置(ブラウザ左上角相対)(PageX、PageY)
コンピュータのスクリーン座標位置:(screenX、screenY)
6.event.keyCode:キーボードボタンのASCII値
3.メモリと性能
1)イベント依頼:ある親要素の中に複数のサブ要素が同じイベントに応答すると、このイベントを親要素に依頼し、接続の回数を制限し、ターゲット・idを判断して区別する.このようにDOM元素だけを取得してメモリを節約します.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<script>
window.onload=function(){
var list = document.getElementById("myUl");
EventUtil.addHandler(list,"click",function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
alert(target)
switch(target.id){
case "li_a":
document.title = "I changed the document's title";
break;
case "li_b":
location.href = "http://www.baidu.com";
break;
case "li_c":
alert("feng");
break;
}
});
}
</script>
</head>
<body>
<ul id="myUl">
<li id="li_a">wei</li>
<li id="li_b">xiao</li>
<li id="li_c">feng</li>
</ul>
</body>
</html>var btn = document.getElementById("myBtn");//
btn.onclick = function(){
//
btn.onclick = null;// ，
document.getElementById("myDiv").innerHTML = "Processing "
}HTMLではフォームは