< form id="form1" name="form1" method=" post" action="">
02< input id=" save" name=" save" type=" button" value="保存">
03 </ form>
04< script type=" text/ javascript">
05function handle(oEvent){
06if(window. event) oEvent = window. event;//处理兼容性,获取事件对象
07var oTarget;
08if(oEvent. srcElement)//处理兼容性,获取发生事件的元素
09oTarget = oEvent. srcElement;
10else
11oTarget = oEvent. target;
12alert(oTarget. tagName);//弹出发生事件的元素标记名称
13}
14form1. save. onclick = handle;//为按钮绑定单击事件
15</ script>事件对象解决不同浏览器兼容问题
我来详细分步讲解这段代码:
第1-3行:HTML表单结构
创建了一个id和name都为"form1"的表单
method="post" 指定表单提交方式为POST
action="" 表示表单提交到当前页面
包含一个id和name都为"save"的按钮,类型为button(不会自动提交表单)
第5-13行:JavaScript事件处理函数
function handle(oEvent){
if(window.event) oEvent = window.event; //处理IE浏览器兼容性
var oTarget;
if(oEvent.srcElement) //IE获取事件源元素
oTarget = oEvent.srcElement;
else
oTarget = oEvent.target; //标准浏览器获取事件源元素
alert(oTarget.tagName); //显示触发事件的元素标签名
}第14行:事件绑定
form1.save.onclick = handle为保存按钮绑定点击事件当按钮被点击时,会调用handle函数
代码执行流程:
用户点击"保存"按钮
触发onclick事件,调用handle函数
函数首先处理浏览器兼容性:
IE使用window.event,其他浏览器使用参数传递
然后获取事件源元素:
IE使用srcElement,其他浏览器使用target
最后弹出警告框显示元素标签名(这里会是"INPUT")
兼容性处理说明:
这段代码主要解决早期IE浏览器与现代浏览器在事件处理上的差异
现代浏览器已基本统一使用标准的事件对象传递方式
当前开发中通常不需要再写这样的兼容代码
这是一个典型的事件处理示例,展示了如何获取事件对象和触发事件的元素信息。