共计 6263 个字符，预计需要花费 16 分钟才能阅读完成。
事件
事件的概念
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间【触发与响应】事件触发：用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等)
事件触发顺序
捕获 – 目标 – 冒泡
事件流事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那么你点击其中一个元素，并不是只有当前被点击的元素会触发事件，而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。
事件冒泡事件冒泡是从里往外逐个触发. 事件捕获, 是从外往里逐个触发. 现代的浏览器默认情况下都是事件冒泡的模式.
常用的事件类型
‘on’+ 事件名
表单：
change 事件 — 域的内容被改变 focus 事件 – 元素获得焦点(不冒泡)blur 事件 — 元素失去焦点（不冒泡）
window 事件：
load 事件 – 页面资源包括图像完成加载，当页面完全加载后触发 resize 事件 — 窗口改变。scroll 事件 — 当用户滚动带滚动条的元素时触发
鼠标事件：
contextmenu– 鼠标右键 click 事件 — 单击 mouseover 事件（冒泡）— 当鼠标移入某个元素的那一刻触发 mouseenter 事件（不冒泡）—- 当鼠标移入某个元素的那一刻触发 mouseout 事件（冒泡）— 当鼠标刚移出某个元素的那一刻触发 mouseleave 事件（不冒泡）—- 当鼠标刚移出某个元素的那一刻触发
mouseover 和 mouseenter 的区别是:mouseover,mouseout: 元素的子元素也会触发事件 mouseenter ,mouseleave: 元素的子元素不会触发事件
键盘事件 – 一般由 window 对象或者 document 对象调用
keydown 事件 — 某个键盘按键被按下 keyup 事件 —- 某个键盘按键被松开。keypress 事件 —- 某个键盘按键被按下并松开。
事件的三要素：
1．事件源：要绑定事件的对象；2．事件名称：发生了或是绑定了什么事件；3．事件处理程序：要执行的函数或是要处理的结果。
事件的书写位置：
（1）行内式：页面的标签当中 — 不利于维护
行内式注册事件，将事件类型当作属性名，属性值为一个调用我们在 js 中定义好的函数。相当于函数的返回值赋给 onclick
<div id=”box” onclick=”show()”> 点我 </div>
<script>
function show () {
alert(‘ 点我才弹出来 ’)
}
</script>
内联模式调用的函数不能放到 window.onload 里面, 否则会找不到该函数.
（2）内嵌式(属性绑定模式)：写在 script 标签之间 — 只能绑定一个函数
// 先获取到元素节点对象, 再针对该节点对象添加事件
var box=document.getElementById(‘box’)
box.onclick=function(){
alert(‘ 点我才弹出来 ’)
（3）导入式：后面一般用的多把代码存放在.js 文件中，导入到 html 文件
<sccript src=”demo.js”></script>
注册事件的方式：
<!– 浏览器默认是冒泡事件 –>（1）on+type
var oBtn = document.getElementById(“btn1″);
oBtn.onclick=function(){
alert(‘a’)
}
oBtn.onclick=function(){
alert(‘b’) // 一个节点对象只能邦定一个同名事件，后面的后覆盖掉前面的
}
（2）addEventListener: 标准事件（ie 不支持）element.addEventListener(‘click’, fn, false);// 三个参数：” 事件名称 ”, “ 事件回调 ”, “ 捕获（true）/ 冒泡(false)”。
//FF 和 Chrome addEventListener(事件名，函数)，此方法 ie 不支持
var oBtn = document.getElementById(“btn1”);
oBtn.addEventListener(“click”,function()
{
alert(“a”);
});
oBtn.addEventListener(“click”,function()
{
alert(“b”);
})
（3）attachEvent：仅仅 ie 支持 element.attachEvent(‘onclick’, fn);// 两个参数：”on 事件名称 ”, “ 事件回调 ”。
var oBtn = document.getElementById(“btn1”);
//IE attachEvent(事件名，函数)，此方法只有 ie 支持，FF 和 Chrome 均不支持
oBtn.attachEvent(“onclick”,function()
{
alert(“a”);
});
oBtn.attachEvent(“onclick”,function()
{
alert(“b”);
})
兼容的写法：
//ie 只支持 attachEvent, 而 FF 和 Chrome 只支持 addEventListener
function addEvent(obj,ev,fn)
//obj 为要绑定事件的元素，ev 为要绑定的事件，fn 为绑定事件的函数
{
if(obj.attachEvent)
{
obj.attachEvent(“on” + ev,fn);
}
else
{
obj.addEventListener(ev,fn,false);
}
}
// 绑定事件
addEvent(oBtn,”click”,function()
{
alert(“a”);
})
移除事件
function removeEventListener(element,type,listener){
if(element.removeEventListener){
element.removeEventListener(type,listener,false); // 标准事件
}else if(element.detachEvent){
element.detachEvent(“on”+type,listener); //ie 事件
}else {
element[“on”+type] = null; // 属性绑定事件
}
}
事件对象(event)
event 对象是在触发事件时, 浏览器会通过函数把事件对象作为参数传递过来, 在事件触发执行函数时一般会得到一个隐藏的参数, 该参数也是放在 arguments 数组中
// 普通函数的 arguments
function func() {
console.log(arguments.length); //1, 得到一个传递的参数
}
func(‘hello’);
// 事件绑定的执行函数
box.onclick = function(){
console.log(arguments.length); //1, 得到一个隐藏参数
console.log(arguments); // 数组
console.log(arguments[0]); // 获得该事件对象([object MouseEvent])
};
通过上面两组函数中, 我们发现, 通过事件绑定的执行函数是可以得到一个隐藏参数的. 说明浏览器会自动分配一个参数，这个隐藏参数其实就是 event 对象(事件对象)
获取事件对象
通过函数内部的 arguments 数组对象获取
box.onclick = function(){
console.log(arguments[0]); // 获得该事件对象([object MouseEvent])
};
通过给函数添加一个自定义的形参(推荐)
box.onclick = function(e){
console.log(e); //[object MouseEvent]
}
event 事件兼容问题：ie 不能通过传递的参数来获取，需要用到全局的 window.event 来获取
兼容代码
box.onclick = function(evt){
var e= evt || window.event; // 获取到 event 对象(事件对象)
console.log(e);
};
其中 window.event 中的 window 可以省略, 最终我们可以写成:
box.onclick = function(evt){
var e= evt || event; // 获取到 event 对象(事件对象)
console.log(e);
};
注意: evt||event 不要倒过来写
事件对象属性
button– 返回的是鼠标键码(0 代表鼠标左键,1 代表鼠标滚动,2 代表鼠标右键)
event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的 X，Y 坐标（窗口坐标），会随页面左右滚动而改变可视区域不包括工具栏和滚动条。IE 事件和标准事件都定义了这 2 个属性
event.pageX、event.pageY
浏览器内容区域的 x,y 坐标, 不会随页面滚动而改变类似于 event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标这 2 个属性不是标准属性，但得到了广泛支持。IE 事件中没有这 2 个属性。
event.offsetX、event.offsetY
鼠标相对于事件源元素（srcElement）的 X(左边界),Y（上边界）坐标，只有 IE 事件有这 2 个属性，标准事件没有对应的属性。
event.screenX、event.screenY
事件目标对象 target
目标对象, 存放绑定事件的元素节点对象
标准事件对象使用 event 的 target 属性获取事件目标 event.targetIE 事件对象使用 event 的 srcElement 属性获取事件目标
获取事件目标对象兼容代码写法：
box.onclick = function(evt){
var e= evt || event; // 获取到 event 对象(事件对象)
var objEle = eve.target || eve.srcElement;// 获取事件目标对象
};
事件对象 event：
1.target: 指向事件触发的目标元素对象，第一个事件源 2.currentTarget: 事件处理函数的元素对象，始终与 this 相等;
target 在事件流的目标阶段；currentTarget 在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target 指向被单击的对象而 currentTarget 指向当前事件活动的对象（一般为父级）在事件里面，this 始终指代当前对象 始终是触发事件的事件源 或者是始终是正在执行事件处理函数的事件源
//target 等于目标节点对象（点击的元素节点对象）鼠标点了那就是具体的目标节点对象
//currentTarget 是随着事件流，永远等于 this，
//this 等于正在执行事件处理函数的事件的对象
//currentTarget 指向当前事件活动的对象(跟 this 理解是一样)
禁止事件冒泡。
但是一般我们只在指定的节点上添加事件, 而不想让其传递到下层节点触发事件, 这样我们就需要阻止事件冒泡;
阻止事件冒泡有两个方法:(在指定不想再继续传递事件的节点的事件执行函数中使用)1. 取消冒泡, IE
e.cancelBubble = true;
停止传播, 非 IEe.stopPropagation();
例如:
document.getElementsByTagName(‘input’)[0].onclick= function(evt){
var e = evt || window.event;
// 可以通过下述两个方法取消事件冒泡
e.cancelBubble = true || e.stopPropagation();
}
阻止事件的默认行为。
1.return false// 阻止默认的右键菜单
document.oncontextmenu = function(){
console.log(“ 右键被按下 ”);
return false;
}
<img src=”images/placeholder.png” alt=”” width=”600″ id=”img”/>
// 第一种：
<a href=”images/1.jpg” onclick=”turn1(this);return false;”>
<img src=”images/1-small.jpg” alt=””/>
</a>
var imgBox =document.getElementById(“img”);
function turn1(link){
imgBox.src = link.href;
}
// 第二种：
<a href=”images/2.jpg” onclick=”return turn2(this);”>
<img src=”images/2-small.jpg” alt=””/>
</a>
function turn2(link){
imgBox.src = link.href;
return false;
}
// 第三种：
<a href=”images/3.jpg” id=”link3″>
<img src=”images/3-small.jpg”/>
</a>
var link3=document.getElementById(“link3”);
link3.onclick= function () {
imgBox.src=link3.href;
return false;
}
标准事件对象使用 event 的 preventDefault() 方法取消事件默认行为
event.preventDefault(); // 浏览器不会跳转
3.IE 事件对象使用 event 的 returnValue 属性取消事件默认行为，该属性默认值为 true 设置为 false 就可以取消事件默认行为。event.returnValue = false; // 浏览器不会跳转
兼容代码写法：
function StopDefault(){
if(window.attachEvent){
event.returnValue = false;
}else if(window.addEventListener){
event.preventDefault();
}
}
键码 : keyCode 属性
所有按键 (包括功能键 control, alt,shift, tab, 方向键等, 不包括亮度, 音量.. 的按键) 在发生 keydown 和 keyup 事件时，event 对象的 keyCode 属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符集，keyCode 属性的值与 ASCII 码中对应.
document.onkeydown = function(evt) {
var e = evt || event;
console.log(e.keyCode); // 按任意键，得到相应的 keyCode
};
注意: 大写字母或小写的编码相同, 都为大写字母。
字符编码: charCode 属性
Firefox, Chrome 和 Safari 的 event 对象支持 charCode 属性, 只有按下字符键并且使用 keypress 事件时才会得到 charCode, 这个 charCode 的值和 ASCII 码对应, 和 keyCode 也类似, 但是 charCode 的字母区分大小写. (字符键: 数字, 字母(区分大小写), 字符, 空格, 回车 )
document.onkeypress = function(evt) {
var e = evt || event;
console.log(e.charCode);
}
注：可以使用 String.fromCharCode()将 ASCII 编码转换成实际的字符
