JavaScript事件基础和事件绑定
事件驱动
1.事件
JavaScript侦测到的用户的操作或是页面的一些行为(怎么发生的)
2.事件源
引发事件的元素。(发生在谁的身上)
3.事件处理程序
对事件处理的程序或是函数 (发生了什么事)
JavaScript事件分类
补充事件:
onscroll
onresize
重点讲解事件:
onmousewheel 鼠标滚动;IE
addEventListener("DOMMouseScroll",scrollfun,false) W3C
mouseout 鼠标离开
mouseover 鼠标悬停
事件绑定
1.一般绑定事件t
在脚本中绑定
直接在HTML元素绑定
2.同一个事件绑定多个事件处理程序
IE:
对象.attachEvent("事件(on)",move) 添加
对象. detachEvent("事件(on)","处理程序") 删除
FF:
对象.addEventListener("事件","处理程序",布尔值) 添加
对象.removeEventListener("事件","处理程序",布尔值) 删除
事件对象
一、什么是事件对象
用来记录一些事件发生时的相关的信息的对象
1.只有当事件发生的时候才产生，只能在处理函数内部访问
2.处理函数运行结束后自动销毁。
二、如何获取事件对象
IE：window.event
FF: 对象.on事件=function (e){}
事件对象的属性
关于鼠标事件
相对于浏览器位置的
clientX 当鼠标事件发生的时候，鼠标相对于浏览器X轴的位置
clientY 当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置
相对于屏幕位置的
screenX 当鼠标事件发生的时候，鼠标相对于屏幕X轴的位置
screenY
相对于事件源的位置
IE:
offsetX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置
offsetY
FF:
layerX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置
layerY
事件对象的属性
关于鼠标滚轮的
滚轮事件
if(document.attachEvent){
document.attachEvent("onmousewheel",scrollFn); //IE、 opera
}else if(document.addEventListener){
document.addEventListener("mousewheel",scrollFn,false);
//chrome,safari -webkit-
document.addEventListener("DOMMouseScroll",scrollFn,false);
//firefox -moz-
}
事件对象属性:
事件对象.wheelDelta 获取滚轮滚动的方向 IE
事件对象.detail 获取滚轮滚动的方向 FF
关于鼠标移入移出的
mouseout mouseover
事件对象属性
事件对象.fromElement 鼠标从哪来 IE
事件对象.toElement 鼠标到哪去 IE
事件对象.relatedTarget FF
在mouseover事件中代表IE中的fromElement
在mouseout事件中代表IE中的toElement
事件对象的属性
关于键盘事件
keyCode 获得键盘码
空格:32 回车13 左上右下：37 38 39 40
altKey 判断alt键是否被按下 按下是true 反 之是false 布尔值
ctrlKey
shiftKey
type 用来检测事件的类型 主要是用于多个事件通用一个事件处理程
序的时候
事件流
当页面元素触发事件的时候，该元素的容器以及整个页面都会按照特定顺序响应该元素的触发事件，事件传播的顺序叫做事件流程。
事件流的分类
- 冒泡型事件(所有的浏览器都支持)
由明确的事件源到最不确定的事件源依次向上触发。 - 捕获型事件(IE不支持 w3c标准 火狐)
不确定的事件源到明确的事件源一次向下触发。
addEventListener(事件，处理函数，false)
addEventListener(事件，处理函数，true)
事件流
阻止事件流(事件对象)
IE: 事件对象.cancelBubble=true;
FF: 事件对象.stopPropagation();
获得目标事件源的对象
IE： 事件对象.srcElement
FF: 事件对象阻止浏览器默认行为
if (ev.preventDefault )
ev.preventDefault(); //阻止默认浏览器动作(W3C)
else
ev.returnValue = false;//IE中阻止函数器默认动作的
方式
事件流
