js-事件與行爲

事件：用戶與計算機進行交互（鍵盤、鼠標）

事件分類：鼠標類，鍵盤類，表單類，其它類

　　鼠標類：

　　　　鼠標單擊事件：click；

　　　　鼠標雙擊事件：dbclick；

　　　　鼠標移入事件：mouseover；

 　　　  鼠標按下鬆開事件：mouseup；

　　　　鼠標按下時發生事件：mousedown；

　　　　鼠標移出事件：mouseout ；

　　　   鼠標移動時發生事件：mousemove；

　　鍵盤類：

　　　　鍵盤按下事件：keydown；

　　　　鍵盤彈起事件：keyup；

　　表單類:

　　　　獲取焦點時：focus；

　　　　失去焦點時：blur；

　　　　內容改變時：change；

　　　　輸入內容時：input；

　　其餘類：

　　　　資源加載：load；（等待全部資源（script標籤全部內容及圖片）加載完成後執行）

 

註冊事件的方式：

（1）經過 dom 元素的屬性註冊事件

　　　　經過對象名.事件名 = function（）{}    -->匿名函數

　　eg：

 <input type="button" id="btn">點我</button>
    <script>
        // 獲取 dom 元素
        var btn = document.getElementById('btn');
        // 經過 dom 元素的屬性註冊事件
        btn.onclick = function(){          
            console.log("hello word!");
        }
    </script>

（2）經過標籤的屬性註冊事件

 <input type="button" onclick="fun()">點我</button>
    <script> 
       function  fun(){          
            console.log("hello word!");
        }
    </script>

 

事件監聽器：

　　　　addEventListener(事件類型，處理函數，是否捕獲)           綁定、捕獲事件

　　　　removeEventListener(事件類型，處理函數，是否捕獲)     解除綁定

　　　　（是否捕獲這個參數是boolean類型，默認爲false：冒泡；true爲捕獲）

<style type="text/css">
            div{
                border: 1px solid #000;
            }
            #d1{
                width: 700px;
                height: 700px;
            }
            #d2{
                width: 500px;
                height: 500px;
            }
            #d3{
                width: 300px;
                height: 300px;
            }
</style>

<div id="d1">
    中國
    <div id="d2">
        湖北
        <div id="d3">武漢</div>
    </div>
</div>

<script type="text/javascript">
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");
d1.addEventListener("click",function(event){
     var event = event || window.event;
     alert("中國")
     event.stopPropagation();    //阻止事件冒泡    W3C標準（兼容性的問題：IE8及如下）
     event.cancelBubble = true;  //阻止事件冒泡      IE
},true)
d2.addEventListener("click",function(){
      alert("湖北")
},true)
d3.addEventListener("click",function(){
      alert("武漢")
 },true)
</script>

//結果是隻有中國彈出來，其它沒有

事件冒泡：系統默認，由最層向最外層進行傳遞

事件捕獲：經過手動更改，由最外層向最裏層進行傳遞

阻止事件冒泡：stopPropagation()

 

行爲：當有用戶操做時所帶來的後果

例如：（1）form表單點擊提交按鈕提交後，帶來的後果是表單提交了

　　　（2）a標籤點擊之後，帶來的後果是頁面跳轉

　　　（3）當你在網頁上點鼠標右鍵時，帶來的後果是會出現一個右鍵菜單選項

　　以上這些行爲都是默認行爲，默認行爲也稱爲默認事件，有時候咱們是不須要使用這些默認行爲的，此時咱們就得想辦法阻止默認行爲

 

　阻止默認行爲有三種方法：針對註冊事件

　　（1）return false；

<a href="http://www.baidu.com" id="a1">百度</a>
<script type="text/javascript">
var a1 = document.getElementById("a1");
a1.onclick = function(){   
        return false     //經常使用的

}
</script>

 

　　（2）preventDafault（）；

 

<a href="http://www.baidu.com" id="a1">百度</a> 
<script type="text/javascript">
　　　a1.onclick = function(){
　　　　　　 var event = event || window.event
    　　　　event.preventDefault();   //W3C標準

}
</script>

 

　　（3）returnValue = false；

<a href="http://www.baidu.com" id="a1">百度</a> 
<script type="text/javascript">
　　　a1.onclick = function(){
　　　　　　 var event = event || window.event
    　　　　event.returnValue = false //IE8及如下使用
 } </script>

若是事件綁定是用addEventListener來實現的，那阻止默認行爲必須用e.preventDefault=true。