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 入门教程 [翻译] 推荐
Aug 17 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
javascript获取web应用根目录的方法
Feb 12 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
分享我的jquery实现下拉菜单心的
Nov 29 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
微信小程序实现导航栏选项卡效果
Jun 19 Javascript
原生js实现淘宝放大镜效果
Oct 28 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/04/28 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python新手们容易犯的几个错误总结
2017/04/01 Python
python2.7到3.x迁移指南
2018/02/01 Python
关于Keras Dense层整理
2020/05/21 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
Android interview questions
2016/12/25 面试题
应用化学专业职业生涯规划书
2013/12/31 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
自我检讨书范文
2015/01/28 职场文书
2015年女生节活动总结
2015/02/27 职场文书
结婚十年感言
2015/07/31 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL