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 相关文章推荐
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
js获取和设置属性的方法
Feb 20 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
写一个Vue Popup组件
Feb 25 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 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判断变量类型常用方法
2012/04/24 PHP
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
小型js框架veryide.librar源代码
2009/03/05 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
微信小程序开发之入门实例教程篇
2017/03/07 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
2018/09/27 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
Python实现发送QQ邮件的封装
2017/07/14 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
俄罗斯儿童和青少年服装、鞋子及配件的在线商店:Orby
2020/02/20 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
老师推荐信
2013/10/28 职场文书
食堂个人先进事迹
2014/01/22 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
工作感言一句话
2015/08/01 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
Python实现打乒乓小游戏
2021/09/25 Python