15、TypeScript运行时与浏览器环境全解析

day7

于 2025-11-12 16:54:57 发布

阅读量15

点赞数

CC 4.0 BY-SA版权

分类专栏： TypeScript高手进阶之路文章标签： TypeScript 事件处理跨浏览器兼容

本文链接：https://blog.youkuaiyun.com/day7/article/details/155116958

TypeScript高手进阶之路专栏收录该内容

25 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

TypeScript运行时与浏览器环境全解析

1. 事件处理

1.1 跨浏览器事件监听

在JavaScript中，不同浏览器对事件监听的支持有所不同。例如，IE 9之前的版本使用 attachEvent 方法，而其他现代浏览器使用 addEventListener 方法。可以通过自定义的 addEventCrossBrowser 函数来兼容这两种方法：

function addEventCrossBrowser(element, eventName, listener) {
    if (element.addEventListener) {
        element.addEventListener(eventName, listener, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + eventName, listener);
    }
}

class ClickLogger {
    constructor() {
        addEventCrossBrowser(document, 'click', this.eventListener);
    }
    eventListener(e: Event) {
        const phase = e.eventPhase;
        const tag = (<HTMLElement>e.targe