当前位置：首页 > 资讯 > 技术文档

js事件驱动机制浏览器兼容处理方法

时间：2021-03-07 00:13 编辑：来源：阅读：
扫一扫，手机访问

摘要：js事件驱动机制浏览器兼容处理方法

[b]3.1. 事件是如何产生的 *[/b] 第一种情况，用户对网页做了某些操作，比如，点击了一个按钮，产生点击事件。第二种情况，用户没有对网页做操作，也可能产生事件，比如浏览器已经将整个页面加载完毕，会产生加载完成事件。当事件产生以后，浏览器会查找产生事件的节点有没有绑订相应的事件处理代码。如果有，则调用该代码来处理。如果没有，会继续向上查找父节点，有没有对应的事件处理代码(事件冒泡)。 [b]3.2. 绑订事件处理代码 **[/b] 1) 绑订事件处理代码到html标记乊上比如: <a id="a1" href="" onclick="f1();">click</a> 2) 绑订事件处理代码到dom节点之上 var obj = document.getElementById('a1'); obj.onclick=f1; [b]注意：[/b] a. f1不要加"()",加"()"表示立即执行f1这个凼数。 b. 可以使用匿名凼数迚行绑订。即： obj.onclick=function(){ //代码。 } c. 绑订事件处理代码到dom节点之上，可以将js代码不html完全分离，方便代码的维护。 d. 如果要给绑订的凼数传参。可以使用匿名凼数来解决。即: obj.onclick=function(){ f(参数); } 3) 使用浏览器自带的绑订方式（了解）不同的浏览器，有各自独有的绑订方式，因为丌兼容，所以尽量少用。 Script脚本可以在<body>中写 [img]http://files.jb51.net/file_images/article/201607/2016072309535110.png[/img] 等价于下图[img]http://files.jb51.net/file_images/article/201607/2016072309535111.png[/img] [b]如果传参数怎么办？使用匿名凼数[/b] [img]http://files.jb51.net/file_images/article/201607/2016072309535112.png[/img] 【案例3.1】绑订事件处理代码到html标记之上 ** [b]3.3. 事件对象 ***[/b] 1) 获得事件对象 IE浏览器: 可以直接使用event获得 firefox: 必须给方法添加一个参数event 一般为了兼容ie,firefox，给方法添加一个参数event 2) 事件对象的作用 a. 获得鼠标点击的坐标 event.clientX event.clientY b. 获得事件源(产生事件的那个对象) firefox: event.target获得 IE浏览器: event.srcElement获得 [img]http://files.jb51.net/file_images/article/201607/2016072309535113.png[/img] [img]http://files.jb51.net/file_images/article/201607/2016072309535114.png[/img] [img]http://files.jb51.net/file_images/article/201607/2016072309535115.png[/img] [img]http://files.jb51.net/file_images/article/201607/2016072309535116.png[/img] [b]3.4. 事件冒泡 ** [/b] 1) 什么是事件冒泡？当一个节点产生事件以后，该事件会依次向上传递(先传给父节点，如果父节点还有父节点，再向上传递)。 2) 如何禁止冒泡? event.cancelBubble = true; [img]http://files.jb51.net/file_images/article/201607/2016072309535117.png[/img] 2) “事件冒泡”现象关闭对话框“你点击了一个链接”，继续弹出对话框“你点击了一个div” [img]http://files.jb51.net/file_images/article/201607/2016072309535118.png[/img] 【案例3.4】事件对象 ** <html>  [img]http://files.jb51.net/file_images/article/201607/2016072309535119.png[/img] [img]http://files.jb51.net/file_images/article/201607/2016072309535120.png[/img] [img]http://files.jb51.net/file_images/article/201607/2016072309535121.png[/img] [img]http://files.jb51.net/file_images/article/201607/2016072309535122.png[/img] [img]http://files.jb51.net/file_images/article/201607/2016072309535123.png[/img] ------------------------------------------------------------------------------------------------------ js是采用事件驱动(event-driven)响应用户操作的。比如通过鼠标或者按键在浏览器窗口或者网页元素(按钮,文本框...)上执行的操作,我们称之为事件(Event)。由鼠标或热键引发的一连串程序的动作,称之为事件驱动 (Event-Driver)。对事件进行处理程序或函数，我们称之为事件处理程序 (Event Handler)。 ---------------------------------------------------------------------------------------------------------------------- [img]http://files.jb51.net/file_images/article/201607/2016072309535124.jpg[/img] [img]http://files.jb51.net/file_images/article/201607/2016072309535125.jpg[/img] 浏览器兼容处理

<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>

[img]http://files.jb51.net/file_images/article/201607/2016072309535126.jpg[/img] -------------------------------------------------------------------------------待续一个事件，需要多个方法，可以用，隔开就可以了 <input type="button" value="red" onclick="mychange(this),sayHello()"/> <body onkeydown="showkey(event)" onload="abc()" onunload="abc2()"> 以上这篇js事件驱动机制浏览器兼容处理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：JS中把字符转成ASCII值的函数示例代码
下一篇：BootStrap Progressbar 实现大文件上传的进度条的实例代码

资讯排行榜
更多>>

js事件驱动机制 浏览器兼容处理方法

js事件驱动机制浏览器兼容处理方法