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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
vue + element-ui实现简洁的导入导出功能
Dec 22 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
微信小程序如何使用globalData的方法
Jun 06 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
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调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
jquery中文乱码的多种解决方法
2013/06/21 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
Python制作简单的网页爬虫
2015/11/22 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
深入学习python多线程与GIL
2019/08/26 Python
python urllib爬虫模块使用解析
2019/09/05 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
UGG英国官方网站:UGG UK
2018/02/08 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
英文升职感谢信
2015/01/23 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
电影开国大典观后感
2015/06/04 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫