js事件驱动机制 浏览器兼容处理方法
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>
-------------------------------------------------------------------------------待续
一个事件，需要多个方法，可以用，隔开就可以了
<input type="button" value="red" onclick="mychange(this),sayHello()"/>
<body onkeydown="showkey(event)" onload="abc()" onunload="abc2()">
以上这篇js事件驱动机制 浏览器兼容处理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇JS倒计时实例_天时分秒。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了微信小程序自定义对话框弹出和隐藏动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
最近接了个项目，要开发一个地方的O2O租书项目，使用的是asp.net mvc技术，其中咋图书详情页，用户可以输入借阅的数量，器实现此功能的方法是使用了js来控制数量的增减和校验，对js实现商品数量的增减功能感兴趣的朋友一起学习吧2016-01-01
这篇文章主要介绍了js设置文字颜色的方法,涉及JS页面元素样式操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-12-12
本文对JavaScript中对象的本质、对象与类的关系、对象与引用类型的关系;对象属性如何进行分类;属性中特性进行介绍。感兴趣的朋友可以看下2016-12-12
这篇文章主要为大家详细介绍了layui添加动态菜单与选项卡，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
下面小编就为大家带来一篇关于Iframe父页面与子页面之间的相互调用。小编觉得挺不错的，希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-11-11
JavaScript快速排序...2007-01-01
我们在学习JavaScript中，难免都会去网上查一些资料。也许偶尔就会遇到“事件委托”，但是，大多数时说的是“事件绑定”，对于“事件委托”，或是不提，或是浅尝辄止。对于我这个比较好奇的人来说，实在很蛋疼。尤其是想更多的了解“事件委托”的时候。2015-06-06
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最新评论