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


Posted in Javascript onJuly 23, 2016

3.1. 事件是如何产生的 *

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

3.2. 绑订事件处理代码 **

1) 绑订事件处理代码到html标记?Y上

比如: <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>中写

js事件驱动机制 浏览器兼容处理方法等价于下图js事件驱动机制 浏览器兼容处理方法

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

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

【案例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获得

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

3.4. 事件冒泡 **

1) 什么是事件冒泡?当一个节点产生事件以后,该事件会依次向上传递(先传给父节点,如果父节点还有父节点, 再向上传递)。

2) 如何禁止冒泡? event.cancelBubble = true;

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

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

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

【案例3.4】事件对象 **

<html>

<!--事件对象-->

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

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

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

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

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

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

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

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

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

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

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

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

浏览器兼容处理

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

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

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

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

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

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

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

Javascript 相关文章推荐
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 #Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 #Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 #Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 #Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 #Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 #Javascript
详细探究ES6之Proxy代理
Jul 22 #Javascript
You might like
php简单提示框alert封装函数
2010/08/08 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
php封装的验证码类分享
2017/02/26 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
Python配置mysql的教程(推荐)
2017/10/13 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
给校长的建议书
2014/03/12 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
商务英语广告词大全
2014/03/18 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
内乡县衙导游词
2015/02/05 职场文书
通知的写法
2015/04/23 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书