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 相关文章推荐
js innerHTML 改变div内容的方法
Aug 03 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
vue swipe自定义组件实现轮播效果
Jul 03 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
如何基于JavaScript判断图片是否加载完成
Dec 28 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 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
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php中Ctype函数用法详解
2014/12/09 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
浅析Python中signal包的使用
2015/11/13 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
python实现静态服务器
2019/09/05 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
授权委托书范本
2014/04/03 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
个人工作决心书
2015/09/22 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书