WEB DOM事件探秘：冒泡，捕获

本章内容

1、理解事件流

2、使用事件处理程序

3、不同的事件类型

一、事件流

 

事件是文档或浏览器窗口中发生的特定的交互瞬间。【JavaScript <------>HTML】

事件流：描述的是从页面中接受事件的顺序 （IE：事件冒泡流/ Netscape事件捕获流）

 

事件冒泡流：即事件最开始由最具体的无素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到最不具体的那个节点（文档） input----->document

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

IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流

1、事件冒泡

事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。

2、事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

二、事件处理程序

1、HTML事件处理程序

2、DOM0级事件处理程序

3、DOM2级事件处理程序

DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。

4、IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数

5、跨浏览器的事件处理程序

三、事件对象

事件对象event

1、DOM中的事件对象

(1)、type:获取事件类型

(2)、target：事件目标

(3)、stopPropagation()阻止事件冒泡

(4)、preventDefault()阻止事件的默认行为

2、IE中的事件对象

(1)、type:获取事件类型

(2)、srcElement：事件目标

(3)、cancelBubble=true阻止事件冒泡

(4)、returnValue=false阻止事件的默认行为

 

事件冒泡--》由内到外

 

事件捕获--》由外到内  不太具体的节点应该更早接受到事件，而最具体的节点最后接受到事件。

 

 

HTML事件处理程序(现在不建议使用了):事件直接加在HTML代码中

缺点：HTML和js代码高耦合，如果修改，就要修改两个地方--HTML元素内和script函数。 onclick

 

DOM0级事件处理程序，先获取HTML中的btn的ID，然后在JS中添加事件

var btn2 = document.getElementById("btn2");

btn2.οnclick=function(){...}     //更改不麻烦

先把元素找到，再给元素添加属性-->DOM0级事件处理

 

btn2.οnclick=null；删除

 

 

 

 

DOM2级事件处理程序

定义了两个方法--用于处理指定和删除事件处理程序的操作：

addEventListener()添加事件监听程序

removeEventListener()移除事件监听程序

三个参数设置;事件名称，处理方法(函数)，布尔值--false：表示在冒泡阶段调用事件处理程序(可以最大限度的兼容浏览器)，一般设为false；true表示在捕获阶段调用事件处理程序

 

 

btn3.addEventListener('click',showMes,false);

注意：

1、若事件名称有on，则需去掉on。onclick --> click，onmouseover --> mouseover等等；

2、false 最大限度兼容所有浏览器--事件冒泡流。

3.通过addEventListener添加的事件只能通过removeEventListener来删除。--参数要与添加事件时相同

btn3.removeEventListener(参数);//参数必须和btn.addEventListener的参数一致，删除事件监听

 

DOM0级和DOM2级事件处理程序可以给一个事件绑定多个函数，事件触发的时候会按照绑定顺序执行各个函数。如下所示：

btn3.addEventListener('click',showMes,false);

btn3.addEventListener('click',showMes,function(){alert(this.value）;},false);

 

缺点：IE不支持该事件

 

 

js中所有用．连接符的地方都可以用［］代替。。

Element.onclick === element['onclick']

 

IE事件处理程序

ＩＥ添加事件：attachEvent()；删除事件：detachEvent()；其中表示事件类型的参数中，名字又需要加ｏｎ

 

 

 

 

1.事件对象event：

在触发DOM上的事件时会产生一个对象

type属性，用于获取事件类型（如：点击，划过，键盘事件）

target属性，用于获取事件目标（该事件来自于哪个元素）

stopPropagation()方法，用于阻止事件冒泡（Propagation是传播的意思）

 

event.stopPropagation();

 

preventDefault()方法，阻止事件的默认行为

比如<a href="#">超链接</a>的默认行为是跳转到指定页面

 

2、IE中的事件对象

type属性用于获取事件类型

srcElement属性用于获取事件目标

cancelBubble属性用于阻止事件冒泡

returnValue属性用于阻止事件的默认行为

 

 

 

 

dom.style.display="block";  用于显示元素

dom.style.display="none";  用于隐藏元素

 

QQ面板：

光标位置：clientX clientY

面板位置：offsetLeft offsetTop

窗口高宽winW=document.documentElement.clientWidth||document.body.clientWidth,

      winH=document.documentElement.clientHeight||document.body.clientHeight,

可用宽高maxW=winW-oDrag.offsetWidth,面板宽

      maxH=winH-oDrag.offsetHeight;面板高

 

抽奖：

 

document.οnkeyup=function(event){

        event = event || window.event;

       console.log(event.keyCode);} //键盘检测

KeyDown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件；

KeyPress:当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件；

KeyUp：当用户释放键盘上的键时触发；

Math.random()：生成随机数方法，所生成的随机数为0-1之间的浮点数；

Math.floor()：向下取整；

Math.floor(Math.random()*data.length)：生成0-data.length之间的随机整数；

setInterval（fun，time）：定时器，每隔一定时间就调用函数，方法或对象。

 

 

 

 

 

JS动画效果

去看妙趣课堂吧！

运动框架实现思路

1、速度（改变值left、right、width、height、opacity透明度）

2、缓冲运动

3、多物体运动

4、任意值变化

5、链式运动

6、同时运动