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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
Mar 06 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
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
德生PL660的电路分析和打磨
2021/03/02 无线电
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
微信小程序 共用变量值的实现
2017/07/12 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
python最长回文串算法
2018/06/04 Python
django 环境变量配置过程详解
2019/08/06 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
使用Python的Turtle库绘制森林的实例
2019/12/18 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
python em算法的实现
2020/10/03 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
建筑安全标语
2014/06/07 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server