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高级程序设计》六:事件的更多相关文章

  1. 《JAVASCRIPT高级程序设计》事件委托和模拟事件

    由于事件处理程序可以为现代web应用提供交互能力,因此许多开发人员不分青红皂白向页面中添加大量的处理程序:这在某些语言中不会导致问题,但是在javascript,事件处理程序数量直接关系到页面的整体运 ...

  2. JavaScript高级程序设计(六):关键字 void 和 delete 使用

    一.void 1.概述:JavaScript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. 2.语法:JavaScript void (express)   或则 JavaScri ...

  3. 《JAVASCRIPT高级程序设计》事件处理程序和事件类型

    一.事件流 谈到事件,首要要理解事件流的概念:事件流是指从页面接受事件的顺序:“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.目前大部分的浏览器的事件流是事件冒泡, ...

  4. javascript 高级程序设计 六

    上一节还有一个注意的地方:建议所有函数的必需参数使用命名参数,而非必须的参数使用对象来封装. 通过这几天的读书,发现了一个深入了解所学知识的一个捷径——读书.本来我在计算机这方法的所有知识一般都是从视 ...

  5. 读书笔记 - javascript 高级程序设计 - 第一章 简介

      第一章 简介   诞生时间 1995 最初用途 客服端验证 第一版标准 注意是标准 1997年 Ecma-262  一个完整的js实现由三部分组成 ECMAScript DOM 文档对象模型 BO ...

  6. JavaScript高级程序设计笔记 事件冒泡和事件捕获

    1.事件冒泡 要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body> <div> click me! </div> & ...

  7. javascript高级程序设计---拖拉事件

    拖拉事件 拖拉指的是,用户在某个对象上按下鼠标键不放,拖动它到另一个位置,然后释放鼠标键,将该对象放在那里. 拖拉的对象有好几种,包括Element节点.图片.链接.选中的文字等等.在HTML网页中, ...

  8. 读书笔记-JavaScript高级程序设计(1)

    1.组合继承 (JavaScript 中最常用的继承模式 ) (position: page168) (书中定义了两个变量名 SuperType   SubType  乍一看 感觉不太能区分,我将改为 ...

  9. javascript高级程序设计---js事件思维导图

    绘制思维软件与平时用的笔记,以及导出功能,这三个问题综合起来,于是我把思维导图分开画 1.js事件的基本概念 2.js事件的事件处理程序 3.js事件的事件对象

  10. 读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript

    1 <script>的6个属性 async  立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer  文档显示之后再执行脚本,只对外部脚本有效 lan ...

随机推荐

  1. 开源 java CMS - FreeCMS2.3 留言管理

    原文地址:http://javaz.cn/site/javaz/site_study/info/2015/22027.html 项目地址:http://www.freeteam.cn/ 留言管理 管理 ...

  2. 物联网操作系统HelloX开发人员入门指南

    HelloX开发人员入门指南 HelloX是聚焦于物联网领域的操作系统开发项目,能够通过百度搜索"HelloX".获取具体信息. 当前开发团队正在进一步招募中,欢迎您的了解和添加. ...

  3. 第二篇Activity:2、任务和返回堆栈(Tasks and Back Stack)之基本介绍

    参考:http://developer.android.com/guide/components/tasks-and-back-stack.html 在Android中,一个应用程序里面,通常包含了多 ...

  4. Terracotta收购Ehcache (转)

    随着Terracotta对Ehcache的收购成行,业界两大知名的开源Java缓存产品走到了一起.以提供JVM级“POJO集群”而闻名于世的Terracotta可以将运行在单个JVM上的多线程应用移植 ...

  5. 七古&#183;夏泳小梅沙

    七古·夏泳小梅沙 文/天地尘埃2020 近日与同学等海泳小梅沙,归后背黑而焦灼如针刺.一周后焦皮始脱尽,发现还是往日那个黄种人.涂鸦一文以记之. 一湾碧水青山前, 夏日方来酷暑煎. 疏狂仅仅愿清凉刻, ...

  6. Struts2中指定的校验文件不起作用的原因

    转载请注意出处:http://blog.csdn.net/bettarwang/article/details/39801733 我们知道,假设要为某个Action指定校验文件.那么就要将" ...

  7. Error : APP-FND-01926: The custom event WHEN-LOGON-CHANGED raised unhandled exception: ORA-06502: PL

    In this Document   _afrLoop=440418974213449&id=1508865.1&_afrWindowMode=0&_adf.ctrl-stat ...

  8. 【转】Vim学习资料

    初学资料:1:一个介绍VIM操作的游戏,十分适合初学者.只是:不要怕英文.vim-adventures.com2:http://blog.csdn.net/niushuai666/article/de ...

  9. UVA 10140 - Prime Distance(数论)

    10140 - Prime Distance 题目链接 题意:求[l,r]区间内近期和最远的素数对. 思路:素数打表,打到sqrt(Max)就可以,然后利用大的表去筛素数.因为[l, r]最多100W ...

  10. 【HDU】4888 Redraw Beautiful Drawings 网络流【推断解是否唯一】

    传送门:pid=4888">[HDU]4888 Redraw Beautiful Drawings 题目分析: 比赛的时候看出是个网络流,可是没有敲出来.各种反面样例推倒自己(究其原因 ...