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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
JavaScript中Object和Function的关系小结
Sep 26 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
深入理解JS实现快速排序和去重
Oct 17 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 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基于mcrypt的加密解密实例
2014/10/27 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
js输出列表实现代码
2010/09/12 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
详解Angular 4.x NgTemplateOutlet
2017/05/24 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
用Python实现随机森林算法的示例
2017/08/24 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
python库matplotlib绘制坐标图
2019/10/18 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
python实现横向拼接图片
2020/03/23 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
新西兰优惠网站:Treat Me
2019/07/04 全球购物
蒂娜商店:Tiina the Store
2019/12/07 全球购物
综合素质评价自我评价
2015/03/06 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang