JavaScript 学习笔记(十五)


Posted in Javascript onJanuary 28, 2010

事件
事件是DOM(文档对象模型)的一部分。事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别。
一、事件流
1、冒泡型事件
IE上的解决方案就是冒泡型事件,它的基本思想是从最特定的目标到最不特定的事件目标(document对象)的顺序触发。
过程:按照DOM的层次结构像水泡一样不断上升至顶端。(从里面的div触发事件再到body,到html最后直到document最顶端)。
2、捕获型事件
可以说跟冒泡是正好相反的,事件从最不精确的对象开始触发,然后直到最精确。
3、DOM事件流
DOM同时支持以上两种事件模型,其中捕获型事件先发生,从document对象开始,最后在document对象结束。
二、事件监听函数
1、IE
每个函数和window对象都有两个方法:
attachEvent()方法:附加事件处理函数
[Object].attachEvent(“事件名”,处理函数fnHandler);
该方法有两个参数。
var fnClick = function() {
alert("你点击了ID为div1的DIV");
}
var oDiv = document.getElementById("div1");
oDiv.attachEvent("onclick", fnClick);
可以附加多个处理函数。
detachEvent()方法:分离移除事件处理函数
2、DOM
addEventListener()方法:分配附加事件处理函数
[Object]. addEventListener (“事件名”,处理函数fnHandler,Boolean);
该方法有三个参数(“事件名”,“分配的函数”,处理函数是冒泡阶段还是捕获阶段)
如果事件处理函数是用于捕获阶段,则第三个参数是true,用于冒泡阶段则为false
var fnClick = function() {
alert("Clicked!");
}
var oDiv = document.getElementById("div");
oDiv.addEventListener("click", fnClick, false);
oDiv.removeEventListener("click", fnClick, false);
可以附加多个处理函数。
removeEventListener()方法:移除事件处理函数
三、事件对象
包含三个方面的信息:
1、引起事件的对象:IE中就是window.event,DOM中是处理函数的为唯一参数;
2、事件发生时的鼠标信息;
3、事件发生时的键盘信息。
IE事件对象
在IE中,事件对象是window对象的一个属性event。也就是说,事件处理函数必须这样访问事件对象:
oDiv.onclick = function() { var oEvent = window.event; }oDiv.onclick = function(){ var oEvent = window.event;}
尽管是window对象的属性,event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后销毁。
DOM标准的事件对象
event对象必须作为唯一的参数传给事件处理函数。所以,在DOM兼容的浏览器(如Mozilla,Safari和Opera)中访问事件对象,要这么做:
oDiv.onclick = function() {
var oEvent = arguments[0];
}
//也可以这样
oDiv.onclick = function(oEvent) {
//.....
}

Javascript 相关文章推荐
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
js实现放大镜特效
May 18 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
Extjs 几个方法的讨论
Jan 28 #Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 #Javascript
图像替换新技术 状态域方法
Jan 28 #Javascript
javascript innerText和innerHtml应用
Jan 28 #Javascript
使用JavaScript库还是自己写代码?
Jan 28 #Javascript
js或css实现滚动广告的几种方案
Jan 28 #Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 #Javascript
You might like
php 编写安全的代码时容易犯的错误小结
2010/05/20 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
Yii2使用$this->context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
Js切换功能的简单方法
2010/11/23 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
输入框点击时边框变色效果的实现方法
2016/12/26 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
Layui 设置select下拉框自动选中某项的方法
2018/08/14 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
VueCli生产环境打包部署跨域失败的解决
2020/11/13 Javascript
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python数据结构之翻转链表
2017/02/25 Python
python读取和保存图片5种方法对比
2018/09/12 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
华为的Java面试题
2014/03/07 面试题
小学开学寄语
2014/01/19 职场文书
广告业务员岗位职责
2014/02/06 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
高中综合实践活动总结
2014/07/07 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
采购员岗位职责范本
2015/04/07 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android