时间戳

首页 > 技术文章 > javascript事件操作

javascript事件操作

whatisfantasy 2016-12-31 01:08 原文

这里使用一个图片切换的方法来举例说明，如何通过代码操作事件。

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>

推荐阅读