JavaScript 跨浏览器事件处理与实用函数整理

"JavaScript 经典实例日常收集整理(常用经典)" 在JavaScript编程中，经常会遇到浏览器兼容性问题，尤其是在处理事件监听、事件移除、事件默认行为阻止以及获取页面元素和视口信息等方面。以下是一些JavaScript跨浏览器的经典实例，旨在帮助开发者解决这些问题。 1. 跨浏览器添加事件 当我们需要在DOM元素上添加事件监听器时，`addEventListener` 是W3C标准的方法，但在IE浏览器中需要使用 `attachEvent`。下面的 `addEvent` 函数实现了这两种方法的兼容： ```javascript function addEvent(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { // IE obj.attachEvent('on' + type, fn); } } ``` 2. 跨浏览器移除事件 同理，移除事件监听器时，`removeEventListener` 是标准方法，而IE使用 `detachEvent`。`removeEvent` 函数实现兼容： ```javascript function removeEvent(obj, type, fn) { if (obj.removeEventListener) { obj.removeEventListener(type, fn, false); } else if (obj.detachEvent) { // 兼容IE obj.detachEvent('on' + type, fn); } } ``` 3. 跨浏览器阻止默认行为 阻止事件的默认行为，如点击链接跳转，可以使用 `preventDefault` 方法。但IE浏览器中需使用 `returnValue` 属性。`preDef` 函数实现兼容： ```javascript function preDef(ev) { var e = ev || window.event; if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } ``` 4. 跨浏览器获取目标对象 获取触发事件的目标元素，W3C标准下是 `event.target`，而在IE中则是 `window.event.srcElement`。`getTarget` 函数解决兼容性： ```javascript function getTarget(ev) { if (ev.target) { // W3C return ev.target; } else if (window.event.srcElement) { // IE return window.event.srcElement; } } ``` 5. 跨浏览器获取滚动条位置 获取页面滚动条的位置，需要考虑 `scrollTop` 和 `scrollLeft` 在不同浏览器中的实现。`getSP` 函数提供兼容性解决方案： ```javascript function getSP() { return { top: document.documentElement.scrollTop || document.body.scrollTop, left: document.documentElement.scrollLeft || document.body.scrollLeft; }; } ``` 6. 跨浏览器获取可视窗口大小 获取浏览器可视窗口的尺寸，W3C标准通过 `window.innerWidth` 和 `window.innerHeight`，IE则使用 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight`。`getWindow` 函数处理兼容性： ```javascript function getWindow() { if (typeof window.innerWidth === 'number') { return { width: window.innerWidth, height: window.innerHeight }; } else { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }; } } ``` 这些经典实例为JavaScript开发者提供了在不同浏览器环境下编写兼容代码的基础，确保了代码在各种浏览器中的稳定性和一致性。在实际项目中，开发者可以根据需要灵活运用这些方法，提升代码质量。