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 typeof 用法
Dec 28 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
JS中取二维数组中最大值的方法汇总
Apr 17 Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
微信小程序实现星级评价
Nov 20 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 页面执行时间计算代码
2008/12/04 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
python 实现插入排序算法
2012/06/05 Python
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
django使用html模板减少代码代码解析
2017/12/12 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
学习Django知识点分享
2019/09/11 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
python将数据插入数据库的代码分享
2020/08/16 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
配置管理计划的主要内容有哪些
2014/06/20 面试题
物业管理专业个人的自我评价
2013/11/19 职场文书
中秋节超市促销方案
2014/01/30 职场文书
执行总经理岗位职责
2014/02/03 职场文书
《山谷中的谜底》教学反思
2014/04/26 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
2015年度保密工作总结
2015/04/24 职场文书
SQLyog的下载、安装、破解、配置教程(MySQL可视化工具安装)
2022/09/23 MySQL