码迷,mamicode.com
首页 > 其他好文 > 详细

跨浏览器事件处理程序

时间:2019-12-28 20:58:46      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:element   lang   att   eve   lis   click   ie9   pre   list   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跨浏览器事件处理程序</title>
    <!-- 针对IE8及以下版本 -->
</head>
<body>
    <script>
        //添加事件
        function addHandler(element,type,handler){
            //element:事件对象
            //type:事件类型
            //handler:事件句柄
            if (element.addEventListener){  //判断浏览器是否支持该语句(chrome/opera/IE9支持)
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){  //判断浏览器是否支持该语句(IE8及以下版本支持)
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;//以上两种都不支持时,执行DOM0级事件
            }
        }
        //移除事件
        function removeHandler(element,type,handler){
            if (element.removeEventListener){     //判断浏览器是否支持该语句(chrome/opera/IE9支持)
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){      //判断浏览器是否支持该语句(IE8及以下版本支持)
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;//以上两种都不支持时,执行DOM0级事件
            }
        }
    </script>
    <!-- 测试效果 -->
    <button id="btn">点击</button><!-- 创建按钮 -->
    <script>
        var btn=document.getElementById("btn");//获取按钮
        //事件句柄
        var tan=function (){
            alert("弹框");
        }
        addHandler(btn,"click",tan);//调用添加事件函数
        removeHandler(btn,"click",tan);//调用移除事件函数
    </script>
</body>
</html>

跨浏览器事件处理程序

标签:element   lang   att   eve   lis   click   ie9   pre   list   

原文地址:https://www.cnblogs.com/vinson-blog/p/12112798.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!