Dom当中对于IE和非IE下事件的封装

最新推荐文章于 2022-04-22 15:06:13 发布

娶个村姑当大妾

最新推荐文章于 2022-04-22 15:06:13 发布

阅读量430

点赞数

分类专栏： DOM（文档对象模型）文章标签： dom 事件封装

本文链接：https://blog.csdn.net/bug_money/article/details/54600886

版权

DOM（文档对象模型）专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Dom2中的事件封装

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>event-IE+非IE导入插件+绑定+解绑</title>
<style type="text/css"> 
        div{
            border:1px solid gray;
            text-align: center;
            margin: 0 auto;
            text-align: center;
            margin: 0 auto;
        }
        #outer{
            width:300px;
            height:300px;
        }
        #center{
            width:200px;
            height:200px;
        }
        #inner{
            width:100px;
            height:100px;
        }
    </style>
</head>
<body><!--注释-->
    <div id="outer">
        outer
        <div id="center">
            center
            <div id="inner">
                inner
            </div>
        </div>
    </div>
    <!--导入event.js插件-->
    <script type="text/javascript" src="考-js/event.js"></script>
    <script type="text/javascript">
        var outer = document.getElementById("outer");
        var center = document.getElementById("center");
        var inner = document.getElementById("inner");

        function handler(){
            alert(this.id);
        }
        //事件绑定  
        eventUtil.bind(inner,"click",handler);
        eventUtil.bind(center,"click",handler);
        eventUtil.bind(outer,"click",handler);
        //事件解绑


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

**IE和非IE事件的简单封装源码**
/**
    @author qian
    @date 2016-8-17
    封装事件相关API
*/
//因为对象可以存放一些方法和属性
var eventUtil = {
    bind:function(element,type,handler){
        //IE->没有addEventListenter->nudifined-->flase
        //非IE->有addEventListenter->true
        if(element.addEventListener){
            //当前浏览器支持addEventListenter
            element.addEventListener(type,handler);
        }else if(element.attachEvent){
            element.attachEvent("on"+type,handler);
        }
        //else{element.["on"+type] =handler}
    },
    unbind:function(element,type,handler){
        if(element.removeEventListener){
            element.removeEventListener(type,handler);
        }else if(element.dettachEvent){
            element.dettachEvent("on"+type,handler);
        }else{
            element["on"+type] = null;
        }
    },
    //返回事件对象
    getEvent: function(event){
        return event? event : window.event;
    },
    //获取目标
    getTarget: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;
        }
    }
    //
};
//eventUtil.bind(inner,"click",function(){});

娶个村姑当大妾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom当中对于IE和非IE下事件的封装

**IE和非IE事件的简单封装源码**/** @author qian @date 2016-8-17 封装事件相关API*///因为对象可以存放一些方法和属性var eventUtil = { bind:function(element,type,handler){ //IE->没有addEventListenter->nudifined--
复制链接

扫一扫

专栏目录