事件驱动模型

事件驱动模型

事件是可以被JavaScript侦测到的行为,网页中的每个元素都可以产生出发函数事件

1.事件出发要素

事件源       事件     事件函数

2. 事件分类

2.1 鼠标事件
2.2 键盘事件
2.3 表单事件
3.4 页面事件

3. 绑定事件

3.1 常用function

3.2 标签绑定事件

<input type= "button" value = "点我" onclick = "fn()">

3.3 监听器

//IE适用

添加
element.attachEvent(event ,function);
事件源               事件     事件函数
如果绑定多个函数先执行后绑定的函数

删除
element.detachEvent(event,function);
事件源               事件    事件函数

//谷歌\火狐适用

添加
element.addEventListener(event,function);
btn.addEventListener("click",fn);
不需要前缀
如果绑定多个函数依照添加顺序执行代码

删除
element.removeEventListener(event,function);

4. 事件对象

4.1 事件源对象

1. 当时间爱你发生时,才会产生这个对象
2. 函数处理结束后,自动清除.

4.2 获取Event对象

IE: window.event
其他: e
window.onload = function(e){
var ev = e || window.event;
}

4.3 Event对象的属性

(1)鼠标事件
相对浏览器的位置   clientX  clientY
相对屏幕的位置     screenX  screenY
相对事件源的位置
offsetX     offsetY
火狐 : layerX      layerY

(2)键盘事件
keyCode 获取键盘码
常用按键键盘码
回车:13          ctrl : 17         alt : 18
shift : 16      左键 : 37          上键 : 38
右键 : 39        下键 : 40          空格键 : 42

altkey   ctrlkey   shiftkey   这三个键默认为false ,按下为true

(3)type属性
检测事件类型.