JavaScript、CSS、DOM高階篇學習（一）----事件

阿新 • • 發佈：2021-01-12

一、事件流

1、冒泡型事件（dubbed bubbling）

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3     <head>
 4         <title>冒泡型事件</title>
 5     
 6         <script language ="javascript">
 7            function 
 add(sText){
 8                var oDiv =document.getElementById("display");
 9                oDiv.innerHTML+=sText;//輸出單擊順序
10            }
11         </script>
12     </head>
13         <body onclick="add('body<br>');">
14             <div onclick="add('div<br>');"> 

15                 <p onclick="add('p<br>');">Click Me</p>
16             </div>
17             <div id="display"></div>
18         </body>
19 
20 </html>

View Code

2、捕獲型事件（event capturing）

　　與冒泡型事件的自底向上相反，捕獲型是自頂向下。

二、事件監聽

1、通用監聽方法

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
>
 2 <html>
 3     <head>
 4         <title>監聽函式</title>
 5         <script language ="javascript">
 6            window.onload=function(){
 7                var oP=document.getElementById("myP");        //找到物件
 8                oP.onclick=function(){                       //設定事件監聽函式
 9                    alert('我被點選了');
10                }
11            }
12         </script>
13     </head>
14         <body>
15             <div>
16                 <p id="myP">Click Me</p>
17             </div>
18         </body>
19 
20 </html>

View Code

2、IE的事件監聽函式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title>IE的事件監聽函式</title>
        <script language ="javascript">
          function fnClick(){
              alert("我被點選了");
              oP.detachEvent("onclick",fnClick);        //單擊了一次後刪除監聽函式
          }
          var oP;
          window.onload=function(){
              oP=document.getElementById("myP");    //找到物件
              oP.attachEvent("onclick",fnClick);    //新增監聽函式
          }
        </script>
    </head>
        <body>
            <div>
                <p id="myP">Click Me</p>
            </div>
        </body>

</html>

View Code

3、多個監聽函式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title>多個監聽函式</title>
        <script language ="javascript">
          function fnClick1(){
              alert("我被fnClick1點選了");
          }
          function fnClick2(){
              alert("我被fnClick2點選了");
          }
          var oP;
          window.onload=function(){
              oP=document.getElementById("myP");    //找到物件
              oP.attachEvent("onclick",fnClick1);    //新增監聽函式1
              oP.attachEvent("onclick",fnClick2);    //新增監聽函式2
          }
        </script>
    </head>
        <body>
            <div>
                <p id="myP">Click Me</p>
            </div>
        </body>

</html>

View Code

4、標準DOM的監聽方法

//僅供參考
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title>標準DOM的事件監聽</title>
        <script language ="javascript">
          function fnClick1(){
              alert("我被fnClick1點選了");
              oP.removeEventListener("click",fnClick2,false);     //刪除監聽函式2
          }
          function fnClick2(){
              alert("我被fnClick2點選了");
          }
          var oP;
          window.onload=function(){
              oP=document.getElementById("myP");    //找到物件
              oP.addEventListener("click",fnClick1,false);    //新增監聽函式1
              oP.addEventListener("click",fnClick2,false);    //新增監聽函式2
          }
        </script>
    </head>
        <body>
            <div>
                <p id="myP">Click Me</p>
            </div>
        </body>

</html>

View Code

三、事件物件

1、用同一個函式處理多種事件

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>事件的型別</title>
 6         <script language ="javascript">
 7           function handle(oEvent){
 8               var oDiv=document.getElementById("display");
 9               if(window.event) oEvent=window.event;         //處理相容性，獲得事件物件
10               if(oEvent.type =="click")                     //檢測事件名稱
11                     oDiv.innerHTML+="你點選了我&nbsp&nbsp;";
12               else if(oEvent.type =="mouseover")
13                     oDiv.innerHTML+="你移動到我上方了&nbsp&nbsp;";
14           }
15           window.onload=function(){
16               var oImg=document.getElementsByTagName("img")[0];
17               oImg.onclick=handle;
18               oImg.onmousemove=handle;
19           }
20         </script>
21     </head>
22         <body>
23             <div>
24                 <img src="F:\VScode測試\TESTfile\images\1.jpg" border="0">
25                 <p id="display"></p>
26             </div>
27         </body>
28 
29 </html>

View Code

2、獲取事件的目標

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>事件的目標</title>
 6         <script language ="javascript">
 7           function handle(oEvent){
 8               var oDiv=document.getElementById("display");
 9               if(window.event) oEvent=window.event;         //處理相容性，獲得事件物件
10               var oTarget;
11               if(oEvent.srcElement)                         //處理相容性，獲取事件目標
12                 oTarget=oEvent.srcElement;
13               else
14                 oTarget=oEvent.target;
15               alert(oTarget.tagName);                       //彈出目標的標記名稱
16           }
17           window.onload=function(){
18               var oImg=document.getElementsByTagName("img")[0];
19               oImg.onclick=handle;
20           }
21         </script>
22     </head>
23         <body>
24             <div>
25                 <img src="F:\VScode測試\TESTfile\images\1.jpg" border="0">
26             </div>
27         </body>
28 
29 </html>

View Code

四、事件的型別

1、控制滑鼠事件

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>滑鼠事件</title>
 6         <script language ="javascript">
 7           function handle(oEvent){
 8               if(window.event) oEvent=window.event;         //處理相容性，獲得事件物件
 9               var oDiv=document.getElementById("display");
10               oDiv.innerHTML+=oEvent.type+"<br>";           //輸出事件名稱
11           }
12           window.onload=function(){
13               var oImg=document.getElementsByTagName("img")[0];
14               oImg.onmousedown=handle;                      //將滑鼠事件除了mousemove外都監聽
15               oImg.onmouseup=handle;
16               oImg.onmouseover=handle;
17               oImg.onmouseout=handle;
18               oImg.onclick=handle;
19               oImg.ondbclick=handle;
20           }
21         </script>
22     </head>
23         <body>
24             <div>
25                 <img src="F:\VScode測試\TESTfile\images\1.jpg" border="0" style="float: left; padding: 0px 8px 0px 0px;" >
26                 <div id="display"></div>
27             </div>
28         </body>
29 
30 </html>

View Code

2、輸出滑鼠事件button屬性的值

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>滑鼠事件</title>
 6         <script language ="javascript">
 7          function TestClick(oEvent){
 8              var oDiv=document.getElementById("display");
 9              if(window.event)
10                 oEvent=window.event;
11             oDiv.innerHTML+=oEvent.button;      //輸出button的值
12          }
13          document.onmousedown=TestClick;
14          window.onload=TestClick;           //測試未按下任何鍵
15         </script>
16     </head>
17         <body>
18             <div>
19                 <!-- <img src="F:\VScode測試\TESTfile\images\1.jpg" border="0" style="float: left; padding: 0px 8px 0px 0px;" > -->
20                 <div id="display"></div>
21             </div>
22         </body>
23 
24 </html>

View Code

3、控制鍵盤事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title>鍵盤事件</title>
        <script language ="javascript">
         function handle(oEvent){
            if(window.event) oEvent=window.event;           //處理相容性，獲得事件物件
            var oDiv =document.getElementById("display");
            oDiv.innerHTML+=oEvent.type+"&nbsp;&nbsp;";     //輸出事件名稱
         }
         window.onload=function(){
             var oTextArea=document.getElementsByTagName("textarea")[0];
             oTextArea.onkeydown=handle;            //監聽所有鍵盤事件
             oTextArea.onkeyup=handle;
             oTextArea.onkeypress=handle;
         }
        </script>
    </head>
        <body>
            <div>
                <textarea  cols="50" rows="4"></textarea>
                <div id="display"></div>
            </div>
        </body>

</html>

View Code

4、鍵盤事件的相關屬性

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>鍵盤事件</title>
 6         <script language ="javascript">
 7          function handle(oEvent){
 8             if(window.event) {
 9                 oEvent=window.event;           //處理相容性，獲得事件物件
10                 //設定IE的charCode值
11                 oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;
12             }
13             var oDiv =document.getElementById("display");
14             //輸出測試
15             oDiv.innerHTML+=oEvent.type+":charCode:"+oEvent.charCode+"keyCode:"+oEvent.keyCode+"<br>";
16          }
17          window.onload=function(){
18              var oTextArea=document.getElementsByTagName("textarea")[0];
19              oTextArea.onkeydown=handle;            //監聽所有鍵盤事件
20              oTextArea.onkeypress=handle;
21          }
22         </script>
23     </head>
24         <body>
25             <div>
26                 <textarea  cols="50" rows="4"></textarea>
27                 <div id="display"></div>
28             </div>
29         </body>
30 
31 </html>

View Code

五、例項1：遮蔽滑鼠右鍵

1、方法一：僅在IE瀏覽器中有效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <meta charset="utf-8">
        <title>遮蔽滑鼠右鍵</title>
        <script language ="javascript">
        function block(oEvent){
            if(window.event)
                oEvent=window.event;
            if(window.button==2)
                alert("滑鼠右鍵不可用");
        }
        document.onmousedown=block;
        </script>
    </head>
        <body>
            <p>遮蔽滑鼠右鍵</p>
        </body>

</html>

View Code

2、方法二：可適應其他瀏覽器

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>遮蔽滑鼠右鍵</title>
 6         <script language ="javascript">
 7         function block(oEvent){
 8             if(window.event){
 9                 oEvent=window.event;
10                 oEvent.returnValue=false;       //取消預設事件
11             }else
12                 oEvent.preventDefault();        //取消預設事件
13                 
14         }
15         document.oncontextmenu=block;
16         </script>
17     </head>
18         <body>
19             <p>遮蔽滑鼠右鍵</p>
20         </body>
21 
22 </html>

View Code

六、例項2：伸縮的兩級選單

1、HTML框架

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>伸縮兩級選單</title>
 6          <!-- 設定的CSS樣式 -->
 7          <link  href="test.css" rel="stylesheet"  type="text/css">
 8          <!-- 需用到的js -->
 9          <script src="test.js"></script>
10     </head>
11         <body>
12            <div id="navigation">
13                 <ul id="listUL">
14                     <li><a href="#">Home</a></li>
15                     <li><a href="#">News</a>
16                     <ul>
17                         <li><a href="#">Lastest News</a></li>
18                         <li><a href="#">All News</a></li>
19                     </ul>
20                 </li>
21                 <li><a href="#">Sports</a>
22                     <ul>
23                         <li><a href="#">Basketball</a></li>
24                         <li><a href="#">Football</a></li>
25                         <li><a href="#">Volleyball</a></li>
26                     </ul>
27                 </li>
28                 <li><a href="#">Weather</a>
29                     <ul>
30                         <li><a href="#">Today's Weather</a></li>
31                         <li><a href="#">Forecast</a></li>
32                     </ul>
33                 </li>
34                 <li><a href="#">Contact Me</a></li>
35                 </ul>
36            </div>
37         </body>
38 
39 </html>

View Code

2、設定CSS樣式風格

 1 #navigation > ul{
 2    list-style-type: none;            /*不顯示專案符號 */
 3    margin: 0px;
 4    padding: 0px;
 5 }
 6 #navigation > ul >li{
 7     border-bottom: 1px solid #ed9f9f;   /*新增下劃線*/
 8 }
 9 #navigation > ul >li >a{
10     display: block;                     /*區塊顯示*/
11     padding: 5px 5px 5px 0.5em;
12     text-decoration: none;
13     border-left: 12px solid #711515;    /*左邊的粗紅邊*/
14     border-right: 1px solid #711515;    /*右側陰影*/
15 }
16 #navigation >ul>li>a:link,#navigation >ul>li>a:visited{
17     background-color: #c11136;
18     color: #ffffff;
19 }
20 #navigation>ul>li>a:hover{              /*滑鼠經過時*/
21     background-color: #990020;          /*改變背景色*/
22     color: #ffff00;                     /*改變文字顏色*/
23 }
24 
25 /* 子選單的CSS樣式 */
26 #navigation ul li ul li{
27     list-style-type: none;
28     margin: 0px;
29     padding: 0px 0px 0px 0px;
30 }
31 #navigation ul li ul li a{
32     display: block;
33     padding: 3px 3px 3px 0.5em;
34     text-decoration: none;
35     border-left: 28px solid #a71f1f;
36     border-right: 1px solid #711515;
37 }
38 #navigation ul li ul li a:link,#navigation ul li ul li a:visited{
39     background-color: #e85070;
40     color: #FFFFFF;
41 }
42 #navigation ul li ul li a:hover{
43     background-color: #c2425d;
44     color:#ffff00;
45 }
46 
47 /* 設定隱藏的CSS效果 */
48 #navigation ul li ul.myHide{
49     /*隱藏子選單*/
50     display: none;
51 }
52 #navigation ul li ul.myShow{
53     /*顯示子選單*/
54     display: block;
55 }

View Code

3、JS程式碼

 1 window.onload=function(){
 2     var oU1=document.getElementById("listUL");
 3     var aLi=oU1.childNodes;     //子元素
 4     var oA;
 5     for(var i=0;i<aLi.length;i++){
 6         //如果子元素為li，且這個li有子選單ul
 7         if(aLi.tagName=="LI"&&aLi[i].getElementsByTagName("ul").length){
 8             oA=aLi[i].firstChild;       //找到超連結
 9             oA.onclick=change;          //動態新增單擊函式
10         }
11     }
12 }
13 
14 function change(){
15     //通過父元素li，找到兄弟元素ul
16     var oSecondDiv =this.parentNode.getElementsByTagName("ul")[0];
17     //CSS交替更換來實現顯、隱
18     if(oSecondDiv.className=="myHide")
19         oSecondDiv.className=="myShow";
20     else
21         oSecondDiv.className=="myHide";
22 }

View Code

JavaScript、CSS、DOM高階篇學習（一）----事件

一、事件流 1、冒泡型事件（dubbed bubbling） 1 <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">