DOM事件

最新推荐文章于 2023-11-13 19:18:32 发布

MayMayJn

最新推荐文章于 2023-11-13 19:18:32 发布

阅读量326

点赞数

分类专栏： javascript 文章标签： dom

本文链接：https://blog.csdn.net/MayMayJn/article/details/53508564

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

dom2级事件定义了两个方法：
用于处理指定和删除事件处理程序的操作
addEventListener()和removeEventListener()
接收三个参数：要处理的事件名（千万不能加on）、作为事件处理程序的函数和布尔值
（false）。false代表冒泡阶段，true代表捕获阶段
①Html事件：直接在html标签里写οnclick=”alert(“1”);”
②DOM0事件：
添加——document.getElementById(“aaa”).οnclick=function(){};
移除——document.getElementById(“aaa”).οnclick=null;
③DOM2 事件：(可以绑定多个事件)
添加——
document.getElementById(“aaa”).addEventListener(“click”,function(){},false);
移除——
document.getElementById(“aaa”).removeEventListener(“click”,function(){},false);

IE事件处理程序element.attachEvent(onclick,handler) detachEvent()

跨浏览器解决兼容问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <div id="box">
        <input type="button" name="" value="按钮" id="btn">
    </div>

    <script type="text/javascript">

        function showMes() {
            alert("hello hello");
        }

        var btn = document.getElementById('btn');

        var eventUtil={
            // 添加句柄
            //假定type="onclick",dom2事件必须把on去掉
            addHander:function(element,type,hander) {
                if (element.addEventListener) {
                    element.addEventListener(type,hander,false);
                } else if(element.attachEvent) {
                    element.attachEvent('on'+type,hander);
                } else {
                    element['on'+type] = hander;
                }
            },
            // 删除句柄
            removeHander:function(element,type,hander) {
                if (element.removeEventListener) {
                    element.removeEventListener(type,hander,false);
                } else if(element.detachEvent) {
                    element.detachEvent('on'+type,hander);
                } else {
                    element['on'+type] = null;
                }
            }
        }

        eventUtil.addHander(btn,'click',showMes);
        //删除
        // eventUtil.removeHander(btn,'click',showMes);

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

1.dom中的事件对象
（1）type属性用于获取事件类型；
（2）target属性用于获取事件目标；
（3）stopPropagation()方法用于组织事件冒泡；
（4）preventDefault()方法阻止事件的默认行为；
2.IE中的事件对象
（1）type属性用于获取事件类型；
（2）srcElement属性用于获取事件的目标
（3）cancelBubble属性用于组织事件冒泡
（4）retrunValue属性用于阻止事件的默认行为；