event对象常用属性和方法的兼容写法(兼容IE8以下)

最新推荐文章于 2024-04-23 11:49:15 发布

SuAgnes

最新推荐文章于 2024-04-23 11:49:15 发布

阅读量753

点赞数 1

分类专栏：学习笔记文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_42257012/article/details/85251581

版权

学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

event对象常用属性和方法的兼容写法-IE8以下

event对象常用的属性和方法
封装方法

event对象常用的属性和方法

type:事件的类型;
sreElement/target:事件源,就是发生事件的元素
cancelBubble:布尔属性,设为true的时候,将停止事件进一步起泡到包容层次的元素:(e.cancelBubble=true;相当于e.stopPropagation)
returnValue:布尔属性,设置为false的时候可以阻止浏览器默认的时间动作(e.returnValue=false,相当于e.preventDefault())

下面是一个可以兼容IE8以下的event常用对象和属性的兼容方法，包括了↑↑的属性和方法。

封装方法

<!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>Document</title>
</head>

<body>
    <script>
        window.onload = function () {
            var eventUtil = {
                addHandler: function (ele, type, handler) {
                    // chrome/Firefox/IE9+ addEventListener
                    // IE8- attachEvent
                    if (ele.addEventListener) {
                        ele.addEventListener(type, handler, false);
                    } else if (ele.attachEvent) {
                        ele.attachEvent("on" + type, handler);
                    }
                },
                removeHandler: function (ele, type, handler) {
                    // chrome/Firefox/IE9+ removeEventListener
                    // IE8- detachEvent
                    if (ele.removeEventListener) {
                        ele.removeEventListener(type, handler, false);
                    } else if (ele.detachEvent) {
                        ele.detachEvent("on" + type, handler, false);
                    }
                },
                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;
                    }
                }
            }
// ****************************使用测试分割线****************************
            var child = document.getElementById('child');
            var parent = document.getElementById('parent');
            var a = document.getElementById('a');
            eventUtil.addHandler(child, "click", function (event) {
                var target = eventUtil.getTarget(event);
                console.log(target);
                alert('child被触发了');
                eventUtil.stopPropagation(event);
            })
            eventUtil.addHandler(a, "click", function (event) {
                eventUtil.preventDefault(event);
            })
            eventUtil.addHandler(parent,"click",function(event){
                alert('parent被触发了');
            })
        }
    </script>
    <div id="parent">
        <div id="child">child</div>
    </div>
    <a href="http://www.baidu.com" id="a">跳转</a>
</body>

</html>

SuAgnes

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
event对象常用属性和方法的兼容写法(兼容IE8以下)

event对象常用属性和方法的兼容写法-IE8以下event对象常用的属性和方法event对象常用的属性和方法type:事件的类型;sreElement/target:事件源,就是发生事件的元素cancelBubble:布尔属性,设为true的时候,将停止事件进一步起泡到包容层次的元素:(e.cancelBubble=true;相当于e.stopPropagation)returnVal...
复制链接

扫一扫