javascript事件操作

morra發表於2016-12-31
JavaScript事件

這裡使用一個圖片切換的方法來舉例說明，如何通過程式碼操作事件。

1 通過html屬性處理事件

<img id='avatar1' src="http://7u2gej.com1.z0.glb.clouddn.com/123.png" onmouseover="changeImg(this,event)" onmouseleave="changeImg(this,event)" width="100px" height="100px">
 
<script>
var myImage = [
    "http://7u2gej.com1.z0.glb.clouddn.com/123.png",
    "http://7u2gej.com1.z0.glb.clouddn.com/blog%28hui2%29.png"
]
 
function changeImg(that, e) {
    if (e.type == "mouseleave") {
        that.src = myImage[0]
    } else {
        that.src = myImage[1]
    }
}
</script>

使用Event物件的target屬性代替this

<img id='avatar1' src="http://7u2gej.com1.z0.glb.clouddn.com/123.png" onmouseover="changeImg(event)"
     onmouseleave="changeImg(event)" width="100px" height="100px">
 
<script>
    var myImage = [
        "http://7u2gej.com1.z0.glb.clouddn.com/123.png",
        "http://7u2gej.com1.z0.glb.clouddn.com/blog%28hui2%29.png"
    ]
    function changeImg(e) {
        var el = e.target
 
        if (e.type == "mouseleave") {
            el.src = myImage[0]
        } else {
            el.src = myImage[1]
        }
    }
</script>

缺點：

  • html與js混很容易混在一起，比較難維護修改
  • 不修改html就不能修改事件處理程式
  • 只能為html程式碼中出現的元素簡歷事件處理程式，不能動態建立元素

2 通過物件屬性處理事件

物件屬性處理事件，可以很好的彌補上面兩種方法的缺點。

<img id='avatar' src="http://7u2gej.com1.z0.glb.clouddn.com/123.png" width="100px" height="100px">
 
<script>
    var myImage = [
        "http://7u2gej.com1.z0.glb.clouddn.com/123.png",
        "http://7u2gej.com1.z0.glb.clouddn.com/blog%28hui2%29.png"
    ]
    function changeImg(e) {
        var el = e.target
 
        if (e.type == "mouseleave") {
            el.src = myImage[0]
        } else {
            el.src = myImage[1]
        }
    }

    //執行事件處理程式時，瀏覽器會自動給處理函式傳遞Event物件。
    document.getElementById("avatar").onmouseover = changeImg;
    document.getElementById("avatar").onmouseleave= changeImg;

</script>

3 標準事件模型

3.1 標準方式

通過程式碼連線到事件的標準方式。並且實際專案中一般都使用這種方法：

<script>
    var myImage = [
        "http://7u2gej.com1.z0.glb.clouddn.com/123.png",
        "http://7u2gej.com1.z0.glb.clouddn.com/blog%28hui2%29.png"
    ]
    var img = document.getElementById("avatar")
 
    function chgImgMouseover(e) {
        var el = e.target
        el.src = myImage[1]
    }
 
    function chgImgMouseleave(e) {
        var el = e.target
        el.src = myImage[0]
    }
 
    //不直接使用每個元素的onmouseover/onmouseleave物件，而是通過addEventListener()註冊mouseover/mouseleave事件處理程式
    //新增一個事件監聽器用來監聽mouseover事件
    img.addEventListener("mouseover", chgImgMouseover)
    img.addEventListener("mouseleave", chgImgMouseleave)
 
</script>
img.removeEventListener("mouseover",chgImgMouseover)      //刪除監聽mouseover事件的監聽器
img.removeEventListener("mouseleave", chgImgMouseleave)

標準事件模型的優點是，可以為一個元素的一個事件註冊多個事件監聽器，在需要用不同、不相關的函式監聽元素上同一個事件時，比較有用。
針對同一個所監聽的事件也可以呼叫多個函式，如下：

//這些函式是按順序執行的
img.addEventListener("click", funOne)
img.addEventListener("click", funTwo)
img.addEventListener("click", funThree)
img.addEventListener("click", funFour)

3.2 使用匿名函式

<script>
    var myImage = [
        "http://7u2gej.com1.z0.glb.clouddn.com/123.png",
        "http://7u2gej.com1.z0.glb.clouddn.com/blog%28hui2%29.png"
    ]
    var img = document.getElementById("avatar")
 
 
    img.addEventListener("click", function (e) {
        var el = e.target
        el.src = myImage[1]
        e.preventDefault()   //取消事件的預設動作
    })
 
</script>

相關文章