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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
用jscript实现新建word文档
Jun 15 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
javascript实现计算器功能详解流程
Nov 01 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中实现图片的锐化
2006/10/09 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
python登录豆瓣并发帖的方法
2015/07/08 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
python实现统计代码行数的小工具
2019/09/19 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
秋季红领巾广播稿
2014/01/27 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
超市创业计划书
2014/09/15 职场文书
公司庆典欢迎词
2015/01/26 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
导游词之襄阳古城
2019/09/27 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
关于JavaScript轮播图的实现
2021/11/20 Javascript