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 相关文章推荐
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
写js时遇到的一些小问题
Dec 06 Javascript
JS获取节点的兄弟,父级,子级元素的方法
Jan 09 Javascript
Javascript中For In语句用法实例
May 14 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
Aug 09 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
npm的lock机制解析
Jun 20 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
Javascript之datagrid查询详解
Sep 15 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学习资源和链接.
2006/12/05 PHP
PHP教程 基本语法
2009/10/23 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
Javascript - HTML的request类
2006/07/15 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
javascript单例模式的简单实现方法
2015/07/25 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
老生常谈js数据类型
2017/08/03 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python3使用requests发闪存的方法
2016/05/11 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
迟到检讨书400字
2014/01/13 职场文书
财务总监管理职责范文
2014/03/09 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
感谢信格式范文
2015/01/22 职场文书