常用原生JS兼容性写法汇总

1. 事件绑定的兼容写法

在早期的IE版本中，addEventListener 事件绑定函数并不存在。所以，我们需要使用其他函数来实现事件的绑定。

以下是一种常用的兼容性写法：

function addEvent(obj, event, func) {
    if (obj.attachEvent) {
        obj.attachEvent('on' + event, func);
    } else {
        obj.addEventListener(event, func, false);
    }
}

该函数判断浏览器是否支持 addEventListener 函数来进行事件的绑定。如果是IE浏览器，则使用 attachEvent 方法绑定事件，否则使用 addEventListener 方法来绑定事件。

2. 获取事件对象的兼容写法

在IE事件触发和非IE事件触发情况下，获取事件对象的方法是不同的。以下是一种常用的兼容性写法：

function getEvent(event) {
    return event || window.event;
}

该函数返回 event 或 window.event ，使得在不同的浏览器中都可以获取到事件对象。

示例

下面的示例演示了一个使用以上两条兼容性写法的简单事件绑定实例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Binding Demo</title>
</head>
<body>
    <button id="btn">Click me!</button>
    <script type="text/javascript">
        // 兼容性写法
        function addEvent(obj, event, func) {
            if (obj.attachEvent) {
                obj.attachEvent('on' + event, func);
            } else {
                obj.addEventListener(event, func, false);
            }
        }

        function getEvent(event) {
            return event || window.event;
        }

        function clickHandler(event) {
            event = getEvent(event);
            var target = event.target || event.srcElement;
            alert('You clicked a button! The button ID is: ' + target.id);
        }

        var btn = document.getElementById('btn');
        // 绑定事件
        addEvent(btn, 'click', clickHandler);
    </script>
</body>
</html>

以上示例中，我们创建了一个按钮，然后使用了 addEvent 方法进行事件绑定。在 clickHandler 函数中，使用了 getEvent 方法来获取事件对象，然后使用了 target 属性来获取按钮对象并弹出按钮的 ID。

希望以上内容对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：常用原生JS兼容性写法汇总 - Python技术站