DOM事件探秘之二

最新推荐文章于 2017-07-20 10:26:00 发布

香雪儿sofia

最新推荐文章于 2017-07-20 10:26:00 发布

阅读量347

点赞数

分类专栏： DOM事件文章标签： dom 对象 ie 函数事件对象

本文链接：https://blog.csdn.net/sofia92/article/details/50455439

版权

DOM事件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

3 事件对象

2 IE中的事件对象

（1）type属性用于获取事件类型
（2）srcElement属性用于获取事件目标
（3）cancelBubble（）方法用于阻止事件冒泡
设置为true表示阻止事件冒泡，设置为false表示不阻止冒泡。
（4）returnValue()方法阻止事件的默认行为
设置为false表示阻止事件的默认行为

getEvent: function(event) { //获取事件
  return event ? event : window.event; //三元表示，可以用event就用event不可以就用window.event
},
getType: function(event) { //获取事件类型
  return event.type;
},
getElement: function(event) { //获取事件元素
  return event.target || event.srcElement;
},
preventDefault: function(event) { //阻止事件默认行为
  if (event.preventDefault) {
        event.preventDefault(); //如果支持event.preventDefault方法就用这个
  } else {
        event.returnValue = false; //否则使用returnValue方法
        }
},
stopPropagation: function(event) { //阻止事件冒泡
  if (event.stopPropagation) {
    event.stopPropagation(); //如果支持stopPropagation方法就使用这个
  } else {
       event.cancelBubble = true; //否则使用cancelBubble方法
        }
}

事件对象的实例：用户点击登录按钮时会弹出一个登录框，取消时登录框也会退出。效果如下：
这里写图片描述
【完整实例代码】：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    .head {
        font-size: 12px;
        padding: 6px 0 0 10px;
    }

    #login_box {
        width: 300px;
        height: 150px;
        background: #eee;
        border: 1px solid #ccc;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -75px;
        display: none;
    }

    #login_box p {
        height: 20px;
        border-bottom: 1px solid #ccc;
        font-size: 12px;
        padding: 6px 0 0 5px;
        font-weight: bold;
    }

    #close {
        width: 14px;
        height: 14px;
        background: url(close.png) no-repeat;
        position: absolute;
        right: 4px;
        top: 6px;
        cursor:pointer;//鼠标样式
    }
    </style>
    <script>
    window.onload = function() {
        var login_btn = document.getElementById('login'),
            login_box = document.getElementById('login_box'),
            close = document.getElementById('close');
        // 封装添加事件监听程序
        function addEvent(ele, type, hander) {
            // 执行代码
            if (ele.addEventListener) {
                ele.addEventListener(type, hander, false);
            } else if (ele.attachEvent) {
                ele.attachEvent('on' + type, hander);
            } else {
                ele['on' + type] = hander;
            }
        }
        // 显示登录层函数
        function showLogin() {
            // 执行代码
            login_box.style.display = 'block';
        }
        // 隐藏登录层函数
        function hideLogin() {
            // 执行代码;
            login_box.style.display = 'none';
        }
        //点击登录按钮显示登录层 
        // 执行代码
        addEvent(login_btn, 'click', showLogin);
        //点击关闭按钮隐藏登录层
        // 执行代码
        addEvent(close, 'click', hideLogin);
    }
    </script>
</head>

<body>
    <div class="head">亲，您好！
        <input type="button" value="登 录" id="login">
    </div>
    <div id="login_box">
        <p>用户登录</p><span id="close">X</span>
    </div>
</body>

</html>

香雪儿sofia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件探秘之二

3 事件对象2 IE中的事件对象（1）type属性用于获取事件类型（2）srcElement属性用于获取事件目标（3）cancelBubble（）方法用于阻止事件冒泡设置为true表示阻止事件冒泡，设置为false表示不阻止冒泡。（4）returnValue()方法阻止事件的默认行为设置为false表示阻止事件的默认行为getEvent: function(event)
复制链接

扫一扫

专栏目录