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/FF等)
Apr 23 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
Apr 15 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
Jun 14 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
JavaScript canvas实现流星特效
May 20 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
JS 表单验证大全
2011/11/23 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
javascript中clone对象详解
2014/12/03 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
微信小程序 共用变量值的实现
2017/07/12 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
node.js事件轮询机制原理知识点
2019/12/22 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
Python threading多线程编程实例
2014/09/18 Python
python多进程操作实例
2014/11/21 Python
详解Python命令行解析工具Argparse
2016/04/20 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
成人大专自我鉴定范文
2013/10/19 职场文书
人事助理岗位职责
2013/11/18 职场文书
秘书英文求职信范文
2014/01/31 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
升国旗仪式主持词
2014/03/19 职场文书
出国留学经济担保书
2014/04/01 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
建国大业观后感800字
2015/06/01 职场文书
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电