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 相关文章推荐
ExtJS 下拉多选框lovcombo
May 19 Javascript
基于Jquery的表格隔行换色,移动换色,点击换色插件
Dec 22 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
利用vue实现模态框组件
Dec 19 Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 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实现弹出消息提示框的两种方法
2013/12/17 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
JS实现数组去重方法总结(六种方法)
2017/07/14 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
vue+express+jwt持久化登录的方法
2019/06/14 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
js 函数性能比较方法
2020/08/24 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python中使用PDB库调试程序
2015/04/05 Python
python实现简单成绩录入系统
2019/09/19 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
django rest framework使用django-filter用法
2020/07/15 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
中学教师请假制度
2014/02/03 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
2014年食堂工作总结
2014/11/20 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
python自动计算图像数据集的RGB均值
2021/06/18 Python
介绍一下28个JS常用数组方法
2022/05/06 Javascript