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 相关文章推荐
javascript作用域和闭包使用详解
Apr 25 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
jqTransform美化表单
Oct 10 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
JavaScript实现音乐播放器
Aug 14 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
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
一个程序下载的管理程序(二)
2006/10/09 PHP
php实现复制移动文件的方法
2015/07/29 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
对Django外键关系的描述
2019/07/26 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
2014年元旦感言
2014/03/06 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
死亡赔偿协议书
2015/01/28 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL