事件

HTML或者浏览器窗口发生的一些交互瞬间

 

    事件的执行流程

1.获取HTML页面中指定的标签

2.为指定的标签绑定指定事件

3.编写事件发生时的逻辑代码

代码示例

<button id=”btn”>别点我！</button>

//定位到页面中的按钮

var btn=document.getElementById(‘btn’);

//为按钮绑定（注册）事件

//onclick–事件属性

//alert–事件的处理函数

btn.onclick=function () {

//提供事件触发后的处理逻辑

alert(‘从前有个雪人去晒太阳，就再也没回来了……’)

事件监听

         绑定事件的三种方式

 

HTML事件属性

<button onclick=’myClick()’ id=’btn1′>按钮</button>

不能做到HTML与JavaScript的有效分离

 

DOM事件属性

代码示例

btn2.onclick = myClick;

 

function myClick(){

console.log(‘xxx’);

 

 

添加事件的监听器

addEventListener(type,listener [,options])

IE8不兼容

参数

type

表示当前注册监听的事件类型（名称）

listener

表示当前注册监听事件的回调函数

（事件的处理函数）

options

可选，表示是冒泡还是捕获阶段

一般默认，可省略

代码示例

var btn = document.getElementById(‘btn’);

btn.addEventListener(‘click’,function(){

console.log(‘你终于点中了我…’);

},false);

 

对比

DOM事件属性同一事件只可绑定一次

事件的监听器可重复绑定，不会被覆盖

 

IE8及之前的监听器

elenment.attachEvent(eventName,functionName)

eventName

为元素指定具体的事件名称

functionName

绑定事件的处理函数

示例代码

var btn = document.getElementById(‘btn’);

btn.attachEvent(‘onclick’,function(){

console.log(‘你终于点中了我…’);

});

 

 

监听器的兼容方案

封装一个函数专门来解决浏览器之间的兼容问题

代码示例

function bind(elem, event, callback){

// 判断是否存在 addEventListener

if (elem.addEventListener){

elem.addEventListener(event, callback, false);

}else{

elem.attachEvent(‘on’ + event, callback);

}

}

 

 

    事件中的this

this的含义不会根据注册事件方式的不同而变化

 

含义

代表注册（绑定）事件的目标元素

通过this关键字来指代绑定该事件的标签

代码示例

 

原代码

var btn = document.getElementById(‘btn’);

btn.addEventListener(‘click’,function(){

console.log(btn.textContent)

},false);

 

改写后的代码

var btn = document.getElementById(‘btn’);

btn.addEventListener(‘click’,function(){

console.log(this.textContent)

},false);

 

 

浏览器的兼容问题

其他浏览器绑定的是当前事件的目标元素

IE8浏览器绑定的是window对象

解决方案

function bind(elem, eventName, functionName){

if (elem.addEventListener){

elem.addEventListener(eventName,functionName);

} else {

elem.attachEvent(‘on’ + eventName,function(){

// 将目标元素传递给底层代码，替换this的指向问题

functionName.call(elem);

});

}

}

 

 

事件对象

 

         Event

以事件处理函数中的参数形式出现，不需要

我们自己创建，可直接使用

浏览器的兼容问题

其他浏览器

作为事件的处理函数中的形参出现

IE8及之前的浏览器

作为window对象的属性出现

浏览器兼容解决方案

提供event对象的浏览器兼容解决方案

var e;

if (event){

e = event;

} else {

e = window.event;

}

改写为运算符

var e = event || window.event;

console.log(e);

 

注册事件的浏览器兼容方案

function bind(elem, eventName, functionName){

if (elem.addEventListener){

elem.addEventListener(eventName,functionName);

} else {

elem.attachEvent(‘on’ + eventName,function(){

// 将目标元素传递给底层代码，替换this的指向问题

functionName.call(elem);

});

}

}

 

 

 

绑定元素的目标元素

 

target

示例代码

var ul = document.getElementById(‘ul’);

ul.addEventListener(‘click’,function(event){

console.log(event.target)

},false);

获取触发事件的目标元素

IE8及之前不支持

提供了srcElement属性

示例代码

var ul = document.getElementById(‘ul’);

ul.attachEvent(‘onclick’,function(event){

console.log(event.srcElement)

});

 

浏览器兼容解决方案

var target;

if (event.target){

target = event.target;

}else{

target = event.srcElement;

}

 

 

 

this

获取绑定事件的目标元素

 

阻止默认行为

preventDefault()方法

var aElem = document.getElementById(‘aElem’);

aElem.addEventListener(‘click’,function(event){

event.preventDefault();

});

IE8不兼容

浏览器兼容解决方案

bind(aElem,’click’,function(event){

var e = event || window.event;

// 阻止默认行为的浏览器兼容解决方案

if (event.preventDefault){

event.preventDefault();

} else {

event.returnValue = false;

}

});

 

return false方法

var aElem = document.getElementById(‘aElem’);

aElem.onclick = function(event){

 

return false;

｝

这种方式阻止默认行为只适用于DOM的事件属性方式,

没有浏览器的兼容问题,这种方式必须编写在函数体的最后面

 

    常用的事件

键盘事件

用户操作键盘时发生

keydown

用户按下一个按键

keyup

用户松开一个按键

keypress

用户输入了一个字符（keydown+keyup的组合）

event事件对象

key

获取当前操作的按键（a）

code

获取当前操作的按键（KeyA）

keyCode/charCode

获取当前操作的按键

获取的是Unicode值

注意

charCode可能获取失败

常用Unicode值

a-z

97-122

0-9

48-57

A-Z

65-90

空格

32

回车

13

上下左右

38、40、37、39

 

鼠标事件

用户操作鼠标、触控板或触摸屏发生

click

用户单机鼠标按键

dbclick

用户双击鼠标按键

mousedown

用户按下鼠标anjian

mouseup

用户松开鼠标按键

mouseover

用户将鼠标移动到指定标签上

mousemove

用户移开鼠标

mouseout

用户将鼠标从指定标签上移开

contexmenu

打开鼠标右键菜单

阻止右键菜单

event.preventDafault

代码示例

body.addEventListener(‘contextmenu’,function(event){

// 阻止右键菜单效果

event.preventDefault();

});

鼠标的相对坐标值

pageX和pageY

相对于页面的位置

clientX和clientY

相对于可视窗口的位置

screenX和screenY

相对于屏幕的位置

获取鼠标的坐标值

可以通过event获取当前鼠标的坐标值

代码示例

var body = document.body;

body.onclick = function(event){

console.log(event.clientY,event.pageY,event.screenY);

}

 

鼠标按键

0–鼠标左键

1–鼠标滚轮

2–鼠标右键

事件周期

1.捕获阶段

当捕获阶段为true，根据DOM结构从上往下依次传递，直到事件结束

2.触发阶段

执行对应的处理函数的逻辑代码

IE8及之前不支持捕获阶段

3.冒泡阶段

false，依次向上传递

addEventListener()方法的第三个参数

true

捕获阶段，依次向里传递

false

默认值，冒泡阶段，依次向外传递

阻止冒泡

通过Event事件对象，将冒泡取消

代码示例

d2.addEventListener(‘click’,function(event){

alert(‘这是d2元素’);

event.stopPropagation();

},false);

兼容性解决方案

IE8及之前

cancelBubble

代码示例

if (event.stopPropagation){

event.stopPropagation();

}else{

event.cancelBubble = true;

}

 

 

    事件委托

如果所有的相同标签存在共同的祖先元素，可以使用事件委托

可以将事件绑定在所有相同标签共有的祖先元素上

代码示例

ul.onclick = function(event){

if (event.target.nodeName === ‘A’){

alert(‘我是一个链接.’)

}

}