读书时间《JavaScript高级程序设计》六：事件
Javascript与HTML之间的交互是通过事件实现的。
1. 事件流
事件流描述的是从页面中接收事件的顺序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件流</title>
</head>
<body>
<div id="box"></div>
</body>
</html>
事件冒泡
事件开始 - 具体的元素（文档嵌套层次最深的那个节点）- 逐级向上传播 - 最外围的节点（文档）。
<div> - <body> - <html> - document
事件捕获
事件开始 - 最外围的节点 - 依次向下传播 - 具体的事件节点
document - <html> - <body> - <div>
DOM 事件流: 事件捕获阶段 - 处于目标阶段 - 事件冒泡阶段
document - <html> - <body> - <div> - <body> - <html> - document
IE8及更早的浏览器不支持DOM事件流（不支持事件捕获）
2. 事件处理程序
事件就是用户或者浏览器自身执行的某种动作。 如：‘click’，‘load’，‘mousedown’ 等是事件的名称， 响应事件的函数就是事件处理程序（或者事件侦听器）。
HTML事件处理
<div onclick="alert('点击')">点击我</div>
DOM 0级事件处理程序
<div id="box">点击我</div>
<script type="text/javascript">
var box = document.getElementById('box');
box.onclick = function(){
alert('弹出');
};
</script>
DOM 2级事件处理程序
<div id="box">点击我</div>
<script type="text/javascript">
var box = document.getElementById('box');
box.addEventListener('click', function(){
alert('弹出');
}, false);
</script>
IE8及更早的浏览器的事件处理程序
<div id="box">点击我</div>
<script type="text/javascript">
var box = document.getElementById('box');
box.attachEvent('onclick', function(){
alert('弹出');
});
</script>
兼容的事件处理程序
function addEvent(o, type, fn) {
if (o.addEventListener) {
o.addEventListener(type, fn, false);
} else if (o.attachEvent) {
o.attachEvent('on' + type, fn);
} else {
o['on' + type] = fn;
}
}
function removeEvent(o, type, fn) {
if (o.removeEventListener) {
o.removeEventListener(type, fn, false);
} else if (o.detachEvent) {
o.detachEvent('on' + type, fn);
} else {
o['on' + type] = null;
}
}
3. 事件对象
事件会将一个 event 对象传入到事件处理程序中。
<div id="box">点击我</div>
<script type="text/javascript">
var box = document.getElementById('box');
// DOM
box.addEventListener('click', function(event){
alert(event.type);
}, false);
//IE DOM0
box.onclick = function(){
var event = window.event;
alert(event.type);
};
//IE DOM2
box.attachEvent('onclick', function(event){
alert(event.type);
});
</script>
event对象包含与创建它的特定事件有关的属性和方法。
IE的事件对象
4. 事件类型
浏览器中发生的事件有很多种类型，不同的事件类型有不同的信息。
UI事件
load 当页面完全加载后在window上面触发，当所有框架都加载完在框架集上触发，当图像加载完成时在img元素上触发。
unload 当页面卸载后在window上触发，当所有框架都卸载后在框架集上触发
select 当用户选择文本框（input textarea）中的字符时触发
resize 当窗口或框架的大小变化时在window上或框架上触发
scroll 滚动带滚动条的元素的内容时，在该元素上触发 （<body>元素包含所加载页面的滚动条）
焦点事件
焦点事件会在页面获得焦点货失去焦点时触发
blur 元素失去焦点时触发
focus 元素获得焦点时触发
鼠标与滚轮事件
click 单击鼠标主键或者按下回车键时触发
dbclick 双击鼠标主键时触发
mousedown mousemove mouseup
mouseover mouseout
<div id="box">点击我</div>
<script type="text/javascript">
var box = document.getElementById('box');
// DOM
box.addEventListener('click', function(event){
var keys = [];
if(event.ctrlKey){
keys.push('ctrl');
}
if(event.altKey){
keys.push('alt');
}
if(event.shiftKey){
keys.push('shift');
}
alert(keys.join(',')); // 按下了哪些修改键
}, false);
</script>
键盘和文本事件
使用键盘时会触发键盘事件
keydown 按下键盘上的任意键时触发
keypress 按下键盘上的字符键时触发 按住不放会重复触发 Esc键也会触发
keyup 释放键盘上的键时触发
对应键的键码
HTML5事件
contextmenu 上下文菜单
<ul id="box" style="display: none;">
<li>复制</li>
<li>剪切</li>
<li>粘贴</li>
</ul>
<script type="text/javascript">
var box = document.getElementById('box');
document.addEventListener('contextmenu', function(event){
event.preventDefault();
box.style.display = 'block';
}, false);
document.addEventListener('click', function(event){
box.style.display = 'none';
}, false);
</script>
beforeunload 页面卸载前触发
DOMContentLoaded 在DOM树加载完成时触发
readystatechange 提供文档或者元素的加载状态有关的信息
function loadJS(url, callback) {
var doc = document,
script = doc.createElement('script'),
head = doc.getElementsByTagName('head')[0];
script.type = 'text/javascript';
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadystatechange = null;
callback && callback();
}
};
} else {
script.onload = function() {
callback && callback();
};
}
script.src = url;
head.appendChild(script);
}
hashchange 在URL的参数列表（以及URL中'#'好后面的所有字符串）发生变化时提供通知
触摸事件
touchstart touchmove touchend （iPhone Android）
pointerdown pointermove pointerup （window phone）
手势事件
gesturestart gesturechange gestureen
......
事件委托
自定义事件(事件模拟)
......
第13章主要介绍事件相关知识，事件流，事件处理程序，事件对象，事件类型，事件性能，事件模拟，其中事件性能，事件模拟需要好好熟悉。
读书时间《JavaScript高级程序设计》六：事件的更多相关文章
- 《JAVASCRIPT高级程序设计》事件委托和模拟事件
由于事件处理程序可以为现代web应用提供交互能力,因此许多开发人员不分青红皂白向页面中添加大量的处理程序:这在某些语言中不会导致问题,但是在javascript,事件处理程序数量直接关系到页面的整体运 ...
- JavaScript高级程序设计(六)：关键字 void 和 delete 使用
一.void 1.概述:JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. 2.语法:JavaScript void (express) 或则 JavaScri ...
- 《JAVASCRIPT高级程序设计》事件处理程序和事件类型
一.事件流 谈到事件,首要要理解事件流的概念:事件流是指从页面接受事件的顺序:“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.目前大部分的浏览器的事件流是事件冒泡, ...
- javascript 高级程序设计 六
上一节还有一个注意的地方:建议所有函数的必需参数使用命名参数,而非必须的参数使用对象来封装. 通过这几天的读书,发现了一个深入了解所学知识的一个捷径——读书.本来我在计算机这方法的所有知识一般都是从视 ...
- 读书笔记 - javascript 高级程序设计 - 第一章 简介
第一章 简介 诞生时间 1995 最初用途 客服端验证 第一版标准 注意是标准 1997年 Ecma-262 一个完整的js实现由三部分组成 ECMAScript DOM 文档对象模型 BO ...
- JavaScript高级程序设计笔记 事件冒泡和事件捕获
1.事件冒泡 要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body> <div> click me! </div> & ...
- javascript高级程序设计---拖拉事件
拖拉事件 拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括Element节点.图片.链接.选中的文字等等.在HTML网页中, ...
- 读书笔记-JavaScript高级程序设计（1）
1.组合继承 (JavaScript 中最常用的继承模式 ) (position: page168) (书中定义了两个变量名 SuperType SubType 乍一看 感觉不太能区分,我将改为 ...
- javascript高级程序设计---js事件思维导图
绘制思维软件与平时用的笔记,以及导出功能,这三个问题综合起来,于是我把思维导图分开画 1.js事件的基本概念 2.js事件的事件处理程序 3.js事件的事件对象
- 读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript
1 <script>的6个属性 async 立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer 文档显示之后再执行脚本,只对外部脚本有效 lan ...
随机推荐
- poj3642 Charm Bracelet(0-1背包)
题目意思: 给出N,M,N表示有N个物品,M表示背包的容量.接着给出每一个物品的体积和价值,求背包可以装在的最大价值. http://poj.org/problem? id=3624 题目分析: o- ...
- cocos2d-x 贝塞尔曲线的简单运用（CCBezierTo，CCBezierBy）
原文链接:http://blog.csdn.net/we000636/article/details/8616355 一.贝赛尔曲线简单介绍 贝塞尔曲线是应用于二维图形应用程序的数学曲线.曲线的定义有 ...
- JsonCpp Documentation
JsonCpp - JSON data format manipulation library JsonCpp Documentation 0.6.0-rc2 Introduction JSON (J ...
- Linux下玩转Dota2
Dota2是一款颇为风靡的即时战略类游戏,去年官方就支持Mac和Linux了,对于习惯Mac和linux平台的孩子们来说,简直感动的泪流满面. 当然,也简直是linux程序猿的福音啊啊! 与Win8. ...
- JqGrid 显示表
JqGrid 下表显示了前台图书馆.使用起来非常方便. 我在这里分享使用中遇到的问题及解决方案 ** 一.rowNum属性 ** 1.假设不设置,默认显示数是20,也就是说超过20以后的数据.不再显示 ...
- 关于margin-right的应用问题
今天在群里面,有人抛出了一个关于css中margin-right没有效果的问题.CSS代码和HTML代码例如以下: .style1{ width:400px; height:440px; backgr ...
- Microsoft Visio 2010 怎样把直线,虚线与箭头之间切换
我也是第一次接触这个东西,感慨是把箭头变成直线都搞了半天没搞出来,上网搜页没结果,一次偶然我会了,真是老天爷眷顾我,如今把方法给大家分享,欢迎大家不吝赐教. 直线变箭头: 刚開始是直线: 接着选中直线 ...
- cocos2d-x-3.0新建工程以及移植其他平台
本文来自:http://www.zaojiahua.com/cocos2d-x-3-0.html 有将近俩个礼拜没有研究cocos2dx了,博主最近刷了些ACM的水题,越做感觉越没意思,这哪是考编程啊 ...
- 改动EditPlus默认模板
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2FvaGFpY2hlbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- CodeForces 343D 线段树维护dfs序
给定一棵树,初始时树为空 操作1,往某个结点注水,那么该结点的子树都注满了水 操作2,将某个结点的水放空,那么该结点的父亲的水也就放空了 操作3,询问某个点是否有水 我们将树进行dfs, 生成in[u ...