JavaScript-DOM事件(メモ)
36974 ワード
第1章イベントフロー1-1.イベントの泡が発生します.イベントの最初は、最も具体的な要素(ドキュメントの中のネストレベルの一番深いノード)によって受信されます.そして、一番具体的ではないノード(ドキュメント)に階層的にアップロードします.1−2.イベントキャプチャ:具体的ではないノードは、イベントをより早く受信するべきであり、最も具体的なノードは、最後にイベントを受信する.
第2章イベントハンドラ
2-1 HTMLイベントハンドラ
//短所:HTMLとJSコードが緊密に結合されています.
//より伝統的な方法:一つの関数を一つのイベントの処理プログラムの属性に割り当てて、多く使う;長所:簡単/ブラウザを跨ぐ;
//DOM 2レベルイベントは、イベントハンドラの指定と削除のための操作、/addEvent Listener()とremoveveEventListner()//三つのパラメータを受信します.処理するイベント名/イベントハンドリング関数とブール値./IE 8では、機能しません.
//受信二つのパラメータ:イベント処理関数名とイベント処理関数
第3章事件の対象
3-1 DOMのイベントオブジェクト
//DOM上のイベントをトリガする時、一つのオブジェクト==イベントが発生します.
>1.type==イベントタイプの取得;2.target==イベントターゲットの取得;3.stopPropagation()==事件の泡が立つのを止める;4.preventDefault==イベントを阻止するデフォルトの行為.
>1.type==同上;>2.srcelement属性==イベントターゲットの取得;3.cancleBubble属性==発泡を阻止する.trueを設定すると泡が立たないようにします.falseは組織から泡が出ないようにします.4.return Value属性==イベントを阻止するためのデフォルトの行動.
第4章QQパネルのドラッグ効果
>1.パッケージのClass取得方法
第4章抽選システム
>1.キーボードイベント
>>>1.keyDown:ユーザーがキーボード上の任意のキーを押した時にトリガし、また押さないとこのイベントを繰り返し起動します.2.keyPress:ユーザーがキーボード上の文字キーを押した時にトリガし、また押さないとこのイベントを繰り返し起動します.>>3.keyUp:ユーザーがキーボード上のキーをリリースするときにトリガする.
>2.抽選手順
第2章イベントハンドラ
2-1 HTMLイベントハンドラ
//短所:HTMLとJSコードが緊密に結合されています.
1 1 <input type="button" value=" " onclick="showMessage()">//より伝統的な方法:一つの関数を一つのイベントの処理プログラムの属性に割り当てて、多く使う;長所:簡単/ブラウザを跨ぐ;
1 <input type="button" value=" " id="btn2">
2 <script>
3 var btn2 = document.getElementById('btn2'); // btn2 ;
4 btn2.onclick = function () { // btn2 onclick ;
5 alert(' DOM0 !');
6 }
7 btn2.onclick=null; // onclick ;
8 </script>//DOM 2レベルイベントは、イベントハンドラの指定と削除のための操作、/addEvent Listener()とremoveveEventListner()//三つのパラメータを受信します.処理するイベント名/イベントハンドリング関数とブール値./IE 8では、機能しません.
1 <input type="button" value=" " id="btn3">
2 <script>
3 var btn3 = document.getElementById('btn3');
4 btn3.addEventListener('click',showMessage,false); // ;
5 btn3.addEventListener('click',function(){ // ;
6 alert(this.value);
7 },false);
8 btn3.removeEventListener('click',showMessage,false); // ;
9 </script>//受信二つのパラメータ:イベント処理関数名とイベント処理関数
1 <script>
2 var btn3 = document.getElementById('btn3');
3 btn3.attachEvent('onclick',showMessage); // ;
4 btn3.detachEvent('onclick',showMessage); // ;
5 </script> 1 // 'eventUtil';
2 var eventUtil = {
3 //
4 addHandler:function(element,type,handler){
5 // DOM2 ;
6 if(element.addEventListener){
7 element.addEventListener(type,handler,false);
8 // IE ;
9 }else if(element.attachEvent){
10 element.attachEvent("on"+type,handler);
11 // DOM0 ;
12 }else{
13 element['on'+type] = handler;
14 }
15 };
16 //
17 removeHandler:function(element,type,handler){
18 // DOM2 ;
19 if(element.removeEventListener){
20 element.removeEventListener(type,handler,false);
21 // IE ;
22 }else if(element.detachEvent){
23 element.detachEvent("on"+type,handler);
24 // DOM0 ;
25 }else{
26 element['on'+type] = null;
27 };
28 };
29 };
30 // ;
31 eventUtil.addHandler(btn3,'click',showMessage);第3章事件の対象
3-1 DOMのイベントオブジェクト
//DOM上のイベントをトリガする時、一つのオブジェクト==イベントが発生します.
>1.type==イベントタイプの取得;2.target==イベントターゲットの取得;3.stopPropagation()==事件の泡が立つのを止める;4.preventDefault==イベントを阻止するデフォルトの行為.
1 function showMes(event){
2 alert(event.type); //onclick; ;
3 alert(event.target.nodeName); //INPUT;input ;
4 event.stopPropagation(); // ;
5 }
6 <a href="event.html" onclick="stopGoto();"> </a>
7 function stopGoto(event){
8 event.preventDefault(); // ;
9 }>1.type==同上;>2.srcelement属性==イベントターゲットの取得;3.cancleBubble属性==発泡を阻止する.trueを設定すると泡が立たないようにします.falseは組織から泡が出ないようにします.4.return Value属性==イベントを阻止するためのデフォルトの行動.
1 function showMes(event){
2 // IE event,IE8 window.event;
3 event = event || window.event;
4 // ;
5 var ele = event.target || event.srcElement;
6 // ;
7 if(event.stopPropagation){
8 event.stopPropagation();
9 }else{
10 event.cancleBubble();
11 };
12 // ;
13 if(event.preventDefault){
14 event.preventDefault();
15 }else{
16 event.returnValue = false;
17 }
18 }第4章QQパネルのドラッグ効果
>1.パッケージのClass取得方法
1 function getClass(clsName,parent){
2 var oParent = parent?document.getElementById(parent):document,
3 eles = [],
4 elements = oParent.getElementsByTagName('*');
5
6 for (var i=0,l=elements.length; i<l; i++){
7 if(elements[i].className == clsName){
8 eles.push(elements[i]);
9 }
10 }
11 return eles;
12 } 1 window.onload = drag;
2 function drag(){
3 var oTitle = getClass('login_logo_webqq','loginPanel')[0];
4 //
5 oTitle.onmousedown = fnDown;
6 //
7 var oClose = document.getElementById('ui_boxyClose');
8 oClose.onclick = function(){
9 document.getElementById('loginPanel').style.display = 'none';
10 }
11 //
12 var loginState = document.getElementById('loginstate'),
13 stateList = document.getElementById('loginStatePanel'),
14 lis = stateList.getElementsByTagName('li'),
15 stateTxt = document.getElementById('login2qq_state_txt'),
16 loginStateShow = document.getElementById('login-state_show');
17 loginState.onclick = function(e){
18 // document ul ;
19 e = e || window.event;
20 if(e.stopPropagation){
21 e.stopPropagation();
22 }esle{
23 e.cancleBubble = true;
24 }
25 stateList.style.display = "block";
26 }
27 // /
28 for(var i=0,i<lis.length,i++){
29 lis[i].onmouseover = function(){
30 this.style.background = "#567";
31 }
32 lis[i].onmouseout = function(){
33 this.style.background = "#fff";
34 }
35 lis[i].onclick = function(e){
36 // loginState stateList ;
37 e = e || window.event;
38 if(e.stopPropagation){
39 e.stopPropagation();
40 }esle{
41 e.cancleBubble = true;
42 }
43 var id = this.id;
44 stateList.style.display = "none";
45 stateTxt.innerHTML = getClass('stateSelect_text',id)[0].innerHTML;
46 loginStateShow.className = '';
47 loginStateShow.className = 'login-state-show '+id;
48 }
49 }
50 document.onclick = function(){
51 stateList.style.display = "none";
52 }
53 }
54 // ;
55 function fnDown(event){
56 event = event || window.event;
57 var oDrag = document.getElementById('loginPanel'),
58 // , ;
59 disX = event.clientX - oDrag.offsetLeft,
60 disY = event.clientY - oDrag.offsetTop;
61 //
62 document.onmouseover = function(event){
63 event = event || window.event;
64 fnMove(event,disX,disY);
65 }
66 //
67 document.onmouseup = function(){
68 document.onmouseover = null;
69 document.onmouseup = null;
70 }
71 }
72 // ;
73 function fnMove (e,posX,posY){
74 var oDrag = document.getElementById('loginPanel'),
75 l = e.clientX-posX,
76 t = e.clientY-posY,
77 winW = document.documentElement.clientWidth || document.body.clientWidth,
78 winH = document.documentElement.clientHeight || document.body.clientHeight;
79 maxW = winW-oDrag.offsetWidth,
80 maxH = winH-oDrag.offsetHeight;
81 if(l<0){
82 l = 0;
83 }else if(l>maxW){
84 l = maxW;
85 }
86 if(t<0){
87 t = 0;
88 }else if(t>maxH){
89 t=maxH;
90 }
91 oDrag.style.left = l+'px';
92 oDrag.style.top = t+'px';
93 }第4章抽選システム
>1.キーボードイベント
>>>1.keyDown:ユーザーがキーボード上の任意のキーを押した時にトリガし、また押さないとこのイベントを繰り返し起動します.2.keyPress:ユーザーがキーボード上の文字キーを押した時にトリガし、また押さないとこのイベントを繰り返し起動します.>>3.keyUp:ユーザーがキーボード上のキーをリリースするときにトリガする.
>2.抽選手順
1 var data = ['iPhone5','iPad',' ',' '],
2 timer = null,
3 flag = 0;
4 window.onload = function(){
5 var play = document.getElementById('play'),
6 stop = document.getElementById('stop');
7 //( )
8 play.onclick = palyFun;
9 stop.onclick = stopFun;
10 //( Enter)
11 document.onkeyup = function(event){
12 event = event || window.event;
13 if(event.keyCode == 13){
14 if(flag == 0){
15 palyFun();
16 flag = 1;
17 }else{
18 stopFun();
19 flag = 0;
20 }
21 }
22 }
23 }
24 function palyFun(){
25 var title = document.getElementById('title'),
26 play = document.getElementById('play');
27 // , ;
28 clearInterval(timer);
// ;
29 timer = setInterval(function(){
30 // * = ;
31 var random = Math.floor(Math.random()*data.length);
32 title.innerHTML = data[random];
33 },50);
34 play.style.background = "#999";
35 }
36 function stopFun(){
37 clearInterval(timer);
38 var paly = document.getElementById('play');
39 paly.style.background = '#036';
40 }