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作用域和闭包
Sep 23 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
生成二维码方法汇总
Dec 26 Javascript
jquery图片切换插件
Mar 16 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
js实现图片放大展示效果
Aug 30 Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
js实现随机点名功能
Dec 23 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
极典R601SW收音机
2021/03/02 无线电
PHP初学入门
2006/11/19 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
在python的类中动态添加属性与生成对象
2016/09/17 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
使用python os模块复制文件到指定文件夹的方法
2019/08/22 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
用html5绘制折线图的实例代码
2016/03/25 HTML / CSS
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB