浏览器兼容笔记（1）

最新推荐文章于 2025-06-30 19:50:03 发布

原创最新推荐文章于 2025-06-30 19:50:03 发布 · 595 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DOM #浏览器兼容

javascript笔记同时被 2 个专栏收录

14 篇文章

订阅专栏

HTML技巧

9 篇文章

订阅专栏

文章内容参考自慕课网

一、事件处理程序

html事件处理程序，直接将事件绑定在html代码中，导致耦合性高，不利于程序的更改；
DOM0级事件处理程序，在JavaScript中使用对象的方法来处理事件，如object.onclick = null把点击事件属性赋值为null，IE有的版本不兼容；
DOM2级事件处理程序，调用对象的addEventListener() and removeEventListener()，接受三个参数 - 要处理的事件名、作为事件处理的程序函数、布尔值；如
object.addEventListener('click',showMessage,false)这里的true和false，true表示是在事件捕获中执行，false表示的是冒泡过程中执行；

IE浏览器事件处理程序的方法

IE有自己的事件处理程序的方法，attachEvent()和detachEvent(),函数中的参数只有两个，要处理的事件名、作为事件处理的程序函数；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器兼容性笔记-事件处理程序</title>
</head>
<body>
    <input id="btn1" type="button" value="这是按钮一" />
    <script type="text/javascript">
        var btn1 = document.getElementById("btn1"); 
        function showMessage(){
            alert("当前的按钮被点击了！");
        }
        //给不同的浏览器的事件处理程序封装
        //element表示事件的对象，type表示调用的是什么类别的事件，handler表示事件发生后要执行的函数
        var eventUtil={
            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;
                }
            }
        }
        //调用事件
        eventUtil.addHandler(btn1,'click',showMessage);
    </script>
</body>
</html>