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与用户端
Jul 22 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
红米手机抢购的js代码
Mar 10 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
判断滚动条滑到底部触发事件(实例讲解)
Nov 15 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
php输出形式实例整理
2020/05/05 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
Python对文件操作知识汇总
2016/05/15 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
Python Json数据文件操作原理解析
2020/05/09 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
CSS3实现文字波浪线效果示例代码
2016/11/20 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
房产销售员2015年终工作总结
2015/10/22 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android