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 相关文章推荐
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
js实现星星打分效果的方法
Jul 05 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
webpack 代码分离优化快速指北
May 18 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
PHP7数组的底层实现示例
2019/08/25 PHP
div层的移动及性能优化
2010/11/16 Javascript
js 手机号码合法性验证代码集合
2012/09/29 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python回调函数用法实例分析
2015/05/09 Python
Python第三方库的安装方法总结
2016/06/06 Python
Python selenium如何设置等待时间
2016/09/15 Python
简单谈谈python中的多进程
2016/11/06 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
Python中整数的缓存机制讲解
2019/02/16 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
python日期相关操作实例小结
2019/06/24 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
Python count函数使用方法实例解析
2020/03/23 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
保时捷设计:Porsche Design
2019/03/30 全球购物
数控技术应届生求职信
2013/11/13 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
golang DNS服务器的简单实现操作
2021/04/30 Golang