js事件驱动机制浏览器兼容处理_浏览器 js 调用驱动-优快云博客

本文链接：https://blog.youkuaiyun.com/luyuncsd123/article/details/8221086

本文详细解释了网页事件产生的机制，包括用户操作触发的事件和浏览器自动触发的事件。介绍了如何在HTML标记和DOM节点上绑订事件处理代码，以及事件对象的作用、事件冒泡的概念和如何阻止事件冒泡。通过实例演示了事件处理代码的绑订方法，并强调了浏览器兼容性的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

3.1. 事件是如何产生的 *
第一种情况，用户对网页做了某些操作，比如，点击了一个按钮，产生点击事件。第二种情况，用户没有对网页做操作，也可能产生事件，比如浏览器已经将整个页面加载完毕，会产生加载完成事件。当事件产生以后，浏览器会查找产生事件的节点有没有绑订相应的事件处理代码。如果有，则调用该代码来处理。如果没有，会继续向上查找父节点，有没有对应的事件处理代码(事件冒泡)。

3.2. 绑订事件处理代码 **
1) 绑订事件处理代码到html标记乊上
比如: <a id="a1" href="" onclick="f1();">click</a>
2) 绑订事件处理代码到dom节点之上
var obj = document.getElementById('a1'); obj.onclick=f1;

注意:
a. f1不要加"()",加"()"表示立即执行f1这个凼数。
b. 可以使用匿名凼数迚行绑订。
即： obj.onclick=function(){ //代码。 }
c. 绑订事件处理代码到dom节点之上，可以将js代码不html完全分离，方便代码的维护。
d. 如果要给绑订的凼数传参。可以使用匿名凼数来解决。
即: obj.onclick=function(){ f(参数); }

3) 使用浏览器自带的绑订方式（了解）
不同的浏览器，有各自独有的绑订方式，因为丌兼容，所以尽量少用。

 Script脚本可以在<body>中写

等价于下图

如果传参数怎么办？使用匿名凼数

【案例3.1】绑订事件处理代码到html标记之上 **

3.3. 事件对象 ***
1) 获得事件对象
 IE浏览器: 可以直接使用event获得
 firefox: 必须给方法添加一个参数event

 一般为了兼容ie,firefox，给方法添加一个参数event

2) 事件对象的作用
a. 获得鼠标点击的坐标
event.clientX event.clientY
b. 获得事件源(产生事件的那个对象)
firefox: event.target获得 IE浏览器: event.srcElement获得

3.4. 事件冒泡 **
1) 什么是事件冒泡？
当一个节点产生事件以后，该事件会依次向上传递(先传给父节点，如果父节点还有父节点，再向上传递)。
2) 如何禁止冒泡?
event.cancelBubble = true;

2) “事件冒泡”现象
关闭对话框“你点击了一个链接”，继续弹出对话框“你点击了一个div”

【案例3.4】事件对象 **

<html>

------------------------------------------------------------------------------------------------------

js是采用事件驱动(event-driven)响应用户操作的。

比如通过鼠标或者按键在浏览器窗口或者网页元素(按钮,文本框...)上执行的操作,我们称之为事件(Event)。

由鼠标或热键引发的一连串程序的动作,称之为事件驱动 (Event-Driver)。

对事件进行处理程序或函数，我们称之为事件处理程序 (Event Handler)。

----------------------------------------------------------------------------------------------------------------------

浏览器兼容处理

<script language="javascript">
<!--
     if(window.XMLHttpRequest){ //Mozilla, Safari, IE7,IE8  
     if(!window.ActiveXObject){ // Mozilla, Safari,  
         alert('Mozilla, Safari');  
     }else{  
         alert('IE7 .8');  
     }  
 }else {  
     alert('IE6');  
 } 
//-->
</script>