注册事件

给元素添加事件，被称为注册事件或者绑定事件。

注册事件有两种方式：传统方法和方法监听注册

传统方法

传统注册方式都是以on开头的事件，例如onclick

具有唯一性，对于同一个元素同一个实践，只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

方法监听注册

W3C推荐方法

使用addEventListener()方法

IE9之前的浏览器不支持，可以使用attachEvent()代替（attachEvent()方法非标准）

对于同一个元素同一个事件可以设置多个监听器

使用：

元素名.addEventListener(type,listener[,useCapture])

type是事件类型字符串，比如click、mouseover，注意这里没有on

listener：事件处理函数，事件发生时，会调用该监听函数

useCapture：可选参数，是一个布尔值，默认false，为true则处于捕获阶段，为false则处于冒泡阶段

!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button>点击</button><script>var btn=document.querySelector('button');// 方法监听注册事件// 点击按钮，弹出弹窗btn.addEventListener('click',function(){alert('hello');})</script></body>
</html>

删除事件

对于传统方式注册的事件，使用元素名.事件名=null就可以实现，例如：element.οnclick=null

对于方法监听注册，可以通过元素名.removeEventListener（type,listener[,useCapture]）实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button>点击</button><script>var btn=document.querySelector('button');// 第一次点击按钮时，弹出弹窗btn.addEventListener('click',fn);function fn(){alert('hello');btn.removeEventListener('click',fn);}</script></body>
</html>

DOM事件流

事件流描述的是从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是DOM事件流

分为三个阶段：捕获阶段、当前目标阶段、冒泡阶段

事件对象

事件对象就是写在侦听函数的小括号里面的，可以当形参。

是系统自动创建的，不需要我们创建，但如果要使用，必须在小括号中写event或自己命名

事件对象是我们事件的一系列相关数据的集合，和事件相关

IE6、7、8使用window.event

常见属性和方法：

IE6、7、8中阻止冒泡使用event.cancelBubble=true

事件委托

事件委托：不给每个子节点单独设置事件监听器，而是将事件监听器设置在父节点之上，然后利用冒泡原理影响每个子节点

只操作了一次DOM，效率更高

常用的鼠标事件

禁止鼠标右键显示菜单

//contextmenu主要控制应该何时显示上下文菜单
document.addEventListener('contextmenu',function(e){e.preventDefault(); //阻止默认事件
}

禁止鼠标选中

document.addEventListener('selectstart',function(e){e.preventDefault(); //阻止默认事件
}

鼠标事件对象

MouseEvent

图片跟随鼠标

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>img{position: absolute;display: none;width: 10px;height: 10px;}</style></head><body><img src="img/i1.jpg"  /><script>var img=document.querySelector('img')document.onmousemove=function(e){var x=e.clientX;var y=e.clientY;console.log(x);console.log(y);img.style.top=y+'px';img.style.left=x+'px';img.style.display='block';}</script></body>
</html>

常用键盘事件

如果使用addEventListener，前面不需要加on

三个事件的执行顺序：onkeydown onkeypress onkeyup

键盘事件对象

类似鼠标事件对象

注意keyup和keydown不区分大小写，keypress区分大小写

JavaScript学习9相关推荐

Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
Java程序猿的JavaScript学习笔记（12——jQuery-扩展选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
《Javascript入门学习全集》 Javascript学习第二季（实战4）
Javascript学习第二季(实战4) 上章的例子虽然实现了功能,也做了相应的判断,也符合标准了.但还有一个问题就是: Choose an image. 在html中只是为了图片切换而做的,而 ...
Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
JavaScript学习知识点归纳
JavaScript学习包括几大方面: 1.基础语法 2.JavaScript核心对象 3.DOM操作 4.BOM操作 5.正则表达式 6.AJAX 7.面向对象编程以下依次为各版块相关内容==&g ...
JavaScript学习笔记（五）
JavaScript学习笔记(五) ①Array类本地对象 ②Date类 ①Global对象对象的类型内置对象 ②Math对象宿主对象今天继续学习JS中的对象,昨天内置对象Global对 ...
JavaScript学习笔记（备忘录）
JavaScript学习笔记(备忘录) ===运算符判断数值和类型是否相等.如: console.log('s'==='s') //输出trueconsole.log('1'===1) //输出fa ...
Java程序猿的JavaScript学习笔记（10—— jQuery-在“类”层面扩展）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
JavaScript学习笔记（十）——学习心得与经验小结
JavaScript学习笔记(十)--学习心得与经验小结目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archi ...
JavaScript 学习笔记（1）
1. 何为 Jscript JScript 是一种解释型的.基于对象的脚本语言. 局限性: 1) 不能使用该语言来编写独立运行的应用程序 2) 没有对读写文件的内置 ...

JavaScript学习9