本章内容
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事件处理程序
IE添加事件:attachEvent();删除事件:detachEvent();其中表示事件类型的参数中,名字又需要加on
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、同时运动