DOM中的事件对象

最新推荐文章于 2022-07-18 14:08:39 发布

diaojilu3861

最新推荐文章于 2022-07-18 14:08:39 发布

阅读量83

点赞数

原文链接：http://www.cnblogs.com/iceflorence/p/6083893.html

版权

本文详细介绍了DOM事件处理机制，包括事件对象的属性如type、target，以及如何使用stopPropagation和preventDefault方法。通过实例展示了不同级别的事件处理程序，如DOM0级和DOM2级，并提供了跨浏览器事件处理的解决方案。

摘要由CSDN通过智能技术生成

三、事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target：事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 100px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
    <div id="box">
        <input type="button" value="按钮1" id="btn1" onclick="showMes()">
        <input type="button" value="按钮2" id="btn2">
        <input type="button" value="按钮3" id="btn3">
        <a href="event.html" id="go">跳转</a>
    </div>
    <script>
    //html事件处理程序
    function showMes(event) {
        alert(event.type);
        event.stopPropagation();
    }

    function showBox(event){
        alert(event.target.nodeName);
    }

    function stopGo(event){
        event.preventDefault();
        event.stopPropagation();
    }

    //dom0级事件处理程序
    var btn2 = document.getElementById("btn2");
    var box = document.getElementById("box");
    var go = document.getElementById("go");
    btn2.onclick = function showmessage() {
        alert("这是dom0级处理程序");
    }
    btn2.onclick = null; //删除onclick属性

    // //dom2级事件处理程序
    // var btn3 = document.getElementById("btn3");
    // addEventListener("click", showMes, false); //事件名不能加on,false兼容各种浏览器，listener单词不要写错。
    // addEventListener("click", function() {
    //     alert(btn3.value);
    // }, false);
    // addEventListener("click", function() {
    //     alert("这是dom2级处理程序");
    // }, false);
    // removeEventListener("click", showMes, false); //删除事件属性

    // //dom0 和 dom2都可以添加多个事件属性，按照代码顺序执行

    //能力检测 跨浏览器事件处理
    var eventutill = {
        //添加句柄
        addHandler:function(element,type,handler){
            if(element,addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element,attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;//[]作用等同于".","."不能和字符串紧接着写
            }
        },//这里记得加逗号
         //删除句柄

        removeHandler:function(element,type,handler){
            if(element,removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element,detachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=null;
            }
        }
    }
    eventutill.addHandler(btn3,"click",showMes);//click记得要加引号
    eventutill.addHandler(box,"click",showBox);
    eventutill.addHandler(go,"click",stopGo);
    //eventutill.addHandler(btn3,“click”,showMes);

    </script>
</body>

</html>

2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement：事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为

var eventutill = {
        //添加句柄
        addHandler:function(element,type,handler){
            if(element.addEventListener){//记得判断都要用"."，不是逗号
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;//[]作用等同于".","."不能和字符串紧接着写
            }
        },//这里记得加逗号
         //删除句柄

        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=null;
            }
        },

        getEvent:function(event){
            return event?event:window.event;//这个是三目运算符
            //return event = event || window.event;
        },
        getType:function(event){
            return event.type;
        },//不存在兼容问题
        getElement:function(event){
            return event.target || event.srcElement;
        },
        preventDefault:function(event){
            if (event.preventDefault) {
                event.preventDefault();
            }else{
                event.returnValue = false;
            }
        },
        //判断都是以属性形式判断，不能以方法来判断，不要加（）
        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
        }
    }