JavaScript之事件概念和監聽事件

時間  2019-11-21
標籤 javascript 事件 概念 監聽 欄目 JavaScript 简体版
原文   原文鏈接

 

一、事件的概念：javascript

JavaScript使咱們有能力建立動態頁面，網頁中的每個元素均可以產生某些觸發JavaScript函數的事件。咱們能夠認爲事件是能夠被JavaScript偵測到的一種行爲。html

 

二、事件流：java

事件流主要分爲冒泡型事件和捕獲型事件。IE瀏覽器目前只支持冒泡型事件，而支持標準DOM的瀏覽器好比火狐、Chrome等二者都支持。瀏覽器

 

 三、使用返回值改變HTML元素的默認行爲：框架

　　HTML元素大都包含了本身的默認行爲，例如：超連接、提交按鈕等。咱們能夠經過在綁定事件中加上"return false"來阻止它的默認行爲。函數

 

四、通用性的事件監聽方法：測試

　　（1）綁定HTML元素屬性：this

　　　　<input type="button" value="clickMe" onclick="check(this)">spa

　　（2）綁定DOM對象屬性：3d

　　　　document.getElementById("xxx").onclick=test;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>JavaScript兩種通用性的綁定事件的方式</title>
        <script type="text/javascript">
            function test1(){
                alert("綁定HTML元素屬性");
            }

            function test2(){
                alert("綁定DOM對象屬性");
            }
        </script>
    </head>
    <body>
        <a href="https://www.baidu.com" onclick="return false">百度</a>
        <!--超連接有本身的默認行爲，即當點擊的時候會跳轉頁面。如果要把默認行爲給去掉，能夠綁定一個onclick事件，
        onclick="return false"。這樣點擊就不會跳轉頁面了。-->
        <input type="button" id="test1" value="測試1" onclick="test1()">
        <button type="button" id="test2"><b>測試2</b></button>

        <script type="text/javascript">
            document.getElementById("test2").onclick=test2;//此處不能加括號，加了括號表示調用函數。
            /*注意：函數須要經過後面的觸發纔會調用執行，而上面這句沒有放在函數裏面，JavaScript從上往下解析的時候，解析到上面的那句代碼，
　　　　　　　　若尚未解析到<body>中的id--test2,就會報錯。故JavaScript代碼要放在後面。*/
        </script>
    </body>
</html>

 

五、不經常使用的事件監聽：

　　5.1  IE中的監聽方法：

　　　　5.1.1  [object].attachEvent("事件類型","處理函數");//添加監聽
    　　　5.1.2  [object].detachEvent("事件類型","處理函數");//取消監聽

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>IE監聽事件</title>
        <!--備註：這段代碼測試失敗-->
        <script type="text/javascript">
            function show(){
                alert("Hello IE");
            }

            window.onload=function(){//當整個HTML文檔加載好以後就會觸發onload事件
                document.getElementById("test1").attachEvent("onclick",show);//給第一個按鈕註冊了onclick事件
                document.getElementById("test2").onclick=function(){//解除第一個按鈕的onclick事件
                    document.getElementById("test1").detachEvent("onclick",show);
                }
            };
            
        </script>
    </head>
    <body>
        <input type="button" id="test1" value="測試1">
        <button type="button" id="test2"><b>測試2</b></button>

    </body>
</html>


　　5.2  標準DOM中的事件監聽方法：
　　　　5.2.1  [object].addEvent("事件類型","處理函數","冒泡事件或捕獲事件");
　　　　5.2.2  [object].removeEvent("事件類型","處理函數","冒泡事件或捕獲事件");
   

　　　　提示：IE監聽方法中事件類型和標準DOM監聽方法中的事件類型寫法有點不一樣，前者事件類型用「on」開頭，不如：「onclick」、「onmousemove」等，然後者不須要「on」，就是「click」、「mousemove」等。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>DOM事件監聽</title>
        <script type="text/javascript">
            function show(){
                alert("hello");
            }

            window.onload=function(){
                var test1=document.getElementById("test1");
                var test2=document.getElementById("test2");
                test1.addEventListener("click", show, false);//給第一個按鈕註冊了onclick事件
                /*test2.onclick=function(){//解除第一個按鈕的onclick事件(方法一)
                    test1.removeEventListener("click", show, false);
                }*/
                test2.addEventListener("click", function(){//解除第一個按鈕的onclick事件(方法二)
                    test1.removeEventListener("click", show, false);
                }, false);
            }
        </script>
    </head>
    <body>
        <input type="button" id="test1" value="測試1">
        <button type="button" id="test2"><b>測試2</b></button>
    </body>
</html>

 

六、標準事件流：

　　6.1  舉個例子：冒泡事件（從內至外）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>標準事件流(冒泡事件)</title>
        <script type="text/javascript">
            function show(sText){
                var oDiv=document.getElementById("display");
                oDiv.innerHTML+=sText;
            }
        </script>
    </head>
    <body onclick="show('body<br>')">
        <div onclick="show('div<br>')">
            <p onclick="show('p<br>')">click me</p><!--用此方法爲通用型事件，HTML和js腳本混在一塊兒，沒有隔離開來。-->
        </div>
        <div id="display"></div>
    </body>
</html>

　　運行結果是

　　

　　6.2  冒泡事件和捕獲事件的比較

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>標準事件流(捕獲事件和冒泡事件)</title>
        <!--IE不支持-->
        <script type="text/javascript">
            function show(sText){
                var oDiv=document.getElementById("display");
                oDiv.innerHTML+=sText;
            }

            window.onload=function(){//捕獲事件，即由外到內
                var myBody=document.getElementById("myBody");
                var myDiv=document.getElementById("myDiv");
                var myP=document.getElementById("myP");
                myBody.addEventListener("click", function(){show('body<br>');}, true);//若爲false則是冒泡事件
                myDiv.addEventListener("click", function(){show('div<br>');}, true);
                myP.addEventListener("click", function(){show('p<br>');}, true);
            }
        </script>
    </head>
    <body id="myBody">
        <div id="myDiv">
            <p id="myP">click me</p>
        </div>
        <div id="display"></div>
    </body>
</html>

　　運行結果：

　　

　　假若把addEventListener中的true改成false，那麼運行結果爲：

　　

 七、訪問事件對象：
    事件對象封裝了事件發生的詳細信息，尤爲是鼠標、鍵盤事件。如鼠標事件發生的位置、鍵盤事件的鍵盤鍵等。

　　7.1  IE中的事件對象：
    　　IE中的事件對象是一個隱式可用的全局對象：event，它是window對象的一個屬性。

　　7.2  標準DOM的事件對象：
    　　在標準DOM瀏覽器檢測發生了某個事件時，將自動建立一個Event對象，並隱式地將該對象做爲事件處理函數的第一個參數傳入

    　　//IE中獲得事件對象
    　　op.onclick=function(){
        　　var oEvent=window.event;
    　　}

    　　//標準DOM中獲得事件對象
    　　op.onclick=function(oEvent){
        　　//做爲參數傳進來
    　　}

    　　經驗之談：爲了兼容不一樣的瀏覽器，一般採用下面的方法獲得事件對象。
    　　op.onclick=function(oEvent){
        　　if(window.event){
            　　oEvent=window.event;
        　　}
    　　}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>事件的目標</title>
        <script type="text/javascript">
            function handle(oEvent){
                if(window.event){
                    oEvent=window.event;
                }
                var oTarget;
                if(oEvent.srcElement){
                    oTarget=oEvent.srcElement;
                }else{
                    oTarget=oEvent.target;
                }

                alert(oTarget.tagName);
            }

            window.onload=function(){
                var oImg=document.getElementsByTagName("img")[0];
                oImg.onclick=handle;
            }

            /*總結：
              訪問事件對象：
                  事件對象封裝了事件發生的詳細信息，尤爲是鼠標、鍵盤事件。如鼠標事件發生的位置、鍵盤事件的鍵盤鍵等。            

              IE中的事件對象：
                  IE中的事件對象是一個隱式可用的全局對象：event，它是window對象的一個屬性。              

              標準DOM的事件對象：
                  在標準DOM瀏覽器檢測發生了某個事件時，將自動建立一個Event對象，並隱式地將該對象做爲事件處理函數的第一個參數傳入           

                  //IE中獲得事件對象
                  op.onclick=function(){
                      var oEvent=window.event;
                  }             

                  //標準DOM中獲得事件對象
                  op.onclick=function(oEvent){
                      //做爲參數傳進來
                  }             

                  經驗之談：爲了兼容不一樣的瀏覽器，一般採用下面的方法獲得事件對象。
                  op.onclick=function(oEvent){
                      if(window.event){
                          oEvent=window.event;
                      }
                  }
            */
        </script>
    </head>
    <body>
        <img src="../images/beautiful/荷花278346.jpg" width="300px" height="200px" border="0">
    </body>
</html>

 

　　Event事件對象經常使用的屬性：

　　

八、經常使用的事件類型：

　　8.1  經常使用的鼠標事件：

　　

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>鼠標事件</title>
        <script type="text/javascript">
            function handle(oEvent){//處理兼容性，得到事件對象
                if(window.event) oEvent=window.event;
                var oDiv=document.getElementById("display");
                oDiv.innerHTML+=oEvent.type+"<br>";//輸出事件名稱
            }

            window.onload=function(){
                var oImg=document.getElementsByTagName("img")[0];
                oImg.onmousedown=handle;//將鼠標事件除了mousemove外都監聽
                oImg.onmouseup=handle;
                oImg.onmouseover=handle;
                oImg.onmouseout=handle;
                oImg.onclick=handle;
                oImg.ondblclick=handle;
            }
        </script>
    </head>
    <body>
        <img src="../images/beautiful/傷心童話.jpg" width="300px" height="200px" border="0" style="float:left;padding:0px 8px 0px 0px;">
        <div id="display"></div>
    </body>
</html>

　　8.2  經常使用的鍵盤事件：

　　

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>鍵盤事件</title>
        <script type="text/javascript">
            function handle(oEvent){//處理兼容性，得到事件對象
                if(window.event) oEvent=window.event;
                var oDiv=document.getElementById("display");
                oDiv.innerHTML+=oEvent.type+"&nbsp;&nbsp;&nbsp;";//輸出事件名稱
            }

            window.onload=function(){
                var oTextArea=document.getElementsByTagName("textarea")[0];
                oTextArea.onkeydown=handle;//監聽全部鍵盤事件
                oTextArea.onkeyup=handle;
                oTextArea.onkeypress=handle;
            }
        </script>
    </head>
    <body>
        <textarea rows="4" cols="50"></textarea>
        <div id="display"></div>
    </body>
</html>

　　8.3  HTML事件：

　　

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>HTML事件</title>
    </head>
    <body onload="alert('hello!');" >
    <!--onunload事件並非全部的瀏覽器都支持，好比說標準的DOM瀏覽器基本上都不支持，而IE瀏覽器支持-->
    <form action="http://www.baidu.com" onsubmit="alert('提交啦');"><!--若onsubmit="return false"表示阻止默認提交行爲，即不提交-->
        <input type="text" value="a" onfocus="alert('獲取焦點');"><!-- onblur="alert('失去焦點');"-->
        <input type="text" value="b" onchange="alert('內容改變啦');" onselect="alert('內容選中了');">
        <select name="city" onchange="alert('內容改變啦');">
            <option>上海</option>
            <option>北京</option>
        </select>
        <input type="submit" value="提交">
    </form>
    </body>
</html>

　　提示：載入事件onload是最經常使用的事件之一，由於在頁面載入完成以前，DOM的框架尚未搭建完畢，所以任何操做都不能發生。

　　給window對象分配onload、onunload事件等同於<body>元素的onload、onunload方法。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程