本文对比分析了Internet Explorer与Firefox在JavaScript变量作用域及事件处理机制上的差异。通过多个具体代码示例,展示了原型(prototype)特性在不同环境下的表现,并详细列举了IE与Firefox在DOM元素引用、事件对象传递及变量提升等方面的不同行为,帮助开发者理解跨浏览器兼容性问题。
Prototype特性与变量作用域概述
此处提到的prototype是JavaScript语言本身的一个特性,而非指代那个知名的Prototype框架。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
IE与Firefox作用域差异示例
关于变量作用域,IE与Firefox对JavaScript的处理存在差异。以下列举了几个例子,部分源自此前看到的笔记,部分为个人发现。
2.1
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.2
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.3:
... <button id='thebutton' onclick='click_handler()'>Click me!</button> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.4
... <button id='thebutton' onclick='click_handler(this)'>Click me!</button>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.5
<button id='thebutton' onclick='click_handler(this)'>Click me!</button> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.6
<button id='thebutton' onclick='click_handler(this)'>Click me!</button> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.7
<button id='thebutton' onclick='click_handler(this)'>Click me!</button> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.8
<button id='thebutton' onclick='click_handler(this)'>Click me!</button> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.9
<button id='thebutton' onclick='click_handler(this)'>Click me!</button> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.10
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.11
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.12
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.13
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
2.14:
多文件HTML结果对比
请注意对比这三个HTML文件运行结果的不同之处。
a.html:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
b.html:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
c.html:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
跨浏览器运行差异观察
2.15
观察在IE与Firefox环境下分别运行代码时的具体差异。
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]