一个函数处理多个事件，可以使用type属性，stopPropagation

最新推荐文章于 2024-12-21 08:06:40 发布

转载最新推荐文章于 2024-12-21 08:06:40 发布 · 224 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/shenq/p/6692938.html

本文介绍了一个HTML页面中按钮事件处理的实例，展示了如何使用JavaScript为同一个按钮的不同事件（如点击和鼠标悬停）绑定事件处理函数，并通过event对象区分事件类型。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="button" id="btn">
<script>
    window.onload = function() {
        var btn = document.getElementById('btn');
        var fun = function (event) {
            switch (event.type){
                case "click":
                    alert('1');
                    break;
                case "mouseover":
                    alert('2');
                    break;
            }
        };
        btn.onclick = fun;
        btn.onmouseover = function (event) {
            //立刻停止事件在DOM层次中的传播，所以这边onmouseover的时候不会弹出2。如果去掉这个方法，会弹出2
            event.stopPropagation('mouseover');
        }

    }
</script>
</body>
</html>