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 相关文章推荐
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
Feb 13 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
关于angular引入ng-zorro的问题浅析
Sep 09 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
js中获取 table节点各tr及td的内容简单实例
2016/10/14 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python实现图片插入文字
2019/11/26 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python爬虫谷歌Chrome F12抓包过程原理解析
2020/06/04 Python
英国森林假期:Forest Holidays
2021/01/01 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
初婚未育证明
2014/01/15 职场文书
承诺书的格式范文
2014/03/28 职场文书
幼儿园开学寄语
2014/04/03 职场文书
3的组成教学反思
2014/04/30 职场文书
责任书格式
2015/01/29 职场文书
安全教育主题班会教案
2015/08/12 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android