JavaScript事件驱动机制与浏览器兼容处理详解

事件产生机制

3.1. 事件是如何产生的

事件产生的场景主要分为两类：一是用户主动操作网页，例如点击按钮触发点击事件；二是页面自动加载完成时触发的加载事件。当事件发生后，浏览器会检查触发事件的节点是否绑定了相应的事件处理代码。若存在，则执行该代码；若不存在，则沿DOM树向上查找父节点，直到找到绑定的处理代码或到达根节点，这一过程称为事件冒泡。

事件处理代码绑定方法

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节点上，可以实现JavaScript代码与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>

-------------------------------------------------------------------------------待续

一个事件，需要多个方法，可以用，隔开就可以了

<input type="button" value="red" onclick="mychange(this),sayHello()"/>

<body onkeydown="showkey(event)" onload="abc()" onunload="abc2()">

以上这篇js事件驱动机制 浏览器兼容处理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。