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操作ACCESS数据库(读增改删)的代码
May 14 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
jQuery中delegate()方法的用法详解
Oct 13 Javascript
浅析Jquery操作select
Dec 13 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
js制作提示框插件
Dec 24 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
jquery使用正则表达式验证email地址的方法
2015/01/22 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
Bootstrap和Java分页实例第一篇
2016/12/23 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
Python读写Excel文件的实例
2013/11/01 Python
Python在线运行代码助手
2016/07/15 Python
Python 中Pickle库的使用详解
2018/02/24 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
基于python实现查询ip地址来源
2020/06/02 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
python类共享变量操作
2020/09/03 Python
python 如何设置守护进程
2020/10/29 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
业务主管岗位职责范本
2013/12/25 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
应聘教师求职信范文
2015/03/20 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
小学数学国培研修日志
2015/11/13 职场文书
python的html标准库
2022/04/29 Python