JS-DOM事件

最新推荐文章于 2023-06-29 16:06:57 发布

小菜菜arron

最新推荐文章于 2023-06-29 16:06:57 发布

阅读量214

点赞数

本文链接：https://blog.csdn.net/qq_27985659/article/details/51812139

版权

事件处理程序
1 HTML事件处理程序：直接在HTML中加入执行代码。
缺点：HTML和JS代码紧密耦合在一起，如果要修改，就要两处都进行修改。

<script>
            function showMessage(){
                alert("hello world!");
            }
</script>

<body>
        <input type="button" value="按钮1" id="btn1" onclick="showMessage()" />
</body>

2 DOM 0级处理事件：把一个函数赋值给一个事件处理程序的属性。
优点：简单，跨浏览器

<body>  
        <input type="button" value="按钮2" id="btn2" />
</body>
<script>
        var btn2=document.getElementById("btn2");
        btn2.onclick=function(){
            alert("hello world!");
        }
        btn2.onclick=null;
</script>

3 DOM 2级：定义了两个方法：addEventListener()和removeEventListener()，其中三个参数：要处理的事件名，作为事件处理程序的函数，布尔值（false是冒泡阶段，true 是捕获阶段）
注:DOM 2级不适用与于IE浏览器

<script>
        function showMessage(){
            alert("hello world!");
        }
        var btn2=document.getElementById("btn2");
        btn2.onclick=function(){
            alert("hello world!");
        }
        var btn3=document.getElementById("btn3");
        //第一个参数必须把on去掉，例如onmouseover，要去掉on
        btn3.addEventListener('click',showMessage,false);
        //移除的参数必须与添加的一样
        btn3.removeEventListener('click',showMessage,false);
    </script>

DOM 0和DOM 2都可以为一个对象添加多个事件处理程序，按照代码的顺序来执行。

        //先运行showMessage，再运行此按钮的value值
        btn3.addEventListener('click',showMessage,false);
        btn3.addEventListener('click',function(){
            alert(this.value);
        },false);

4 IE浏览器的程序处理
attachEvent()添加事件处理程序
detachEvent()移除
两个参数：要处理的事件名，作为事件处理程序的函数
没有第三个布尔值的原因：IE8以及之前的浏览器版本只支持冒泡事件。
需要加on

        var btn4=document.getElementById("btn4");
        btn4.attachEvent('onclick',showMessage);
        btn4.detachEvent('onclick',showMessage);

5 跨浏览器事件处理

            var evenUtil={
            //添加句柄
            addHander:function (element,type,handler) {
                if (element.addEventListener) {
                    element.addEventListener(type,handler,false);
                } else if(element.attachEvent){
                    element.attachEvent('on'+type,handler);
                }else{
                    //element.onclick等价于element['onclick']
                    element['on'+type]=handler;
                }
            }
        }
        evenUtil.addHander(btn3,'click',showMessage)