javascript学习笔记 第13章 事件

第13章

事件流

事件冒泡

事件捕获

事件处理程序

HTML事件处理程序

<input type="button" value="chick me" onclick="alert('chick!')" />

动态创建函数， 局部变量event， 扩展作用域
缺点：加载时间差导致出错，扩展作用域导致在不同浏览器出现不同结果，html与js机密结合，乱

DOM0级事件处理程序

var btn = document.getElementById("myBotton");
btn.onclick = function(){ alert("click");}
btn.onclick = null; //删除事件处理程序

DOM2级事件处理程序
addEventListener()
removeEventListener()

var btn = document.getElementById("myBotton");
bnt.addEventListener("click",function(){
alert("click.")}, false)

IE事件处理程序
attachEvent()
detachEvent()

var btn = doucment.getElementById("myBtn");
btn.attachEvent("onclick",function(){alert("click")})

事件对象

DOM中的事件对象

var btn = document.getElementById("myBotton");
bnt.addEventListener("click",function(event){
alert(event.type)}, false)

var btn = document.getElementById("myBotton");
bnt.addEventListener("click",function(event){
alert(event.type.)}, false)

html事件处理程序中动态生成的函数默认创建变量event

IE中的事件对象
访问IE事件对象有几种不同的方式，取决于指定事件处理程序的方法。在DOM0级方法，event对象作为window对象的属性存在，如果是使用attachEvent()添加的，那么就有一个event对象作为参数被传入时间处理程序函数中，代码如下：

btn.onclick = function(){
var event = window.event;
alert(event.type);
}

btn.attachEvent("onclick", function(event){alert(event.type)});  //注意两种不同的方式

事件类型

UI事件：
load()

unload()

abort()

errer()

select()

resize()
scroll();

焦点事件

blur() //不冒泡
focus() //不冒
focusin()
focusout()

鼠标与滚轮事件

click
dbclick
mousedown
mouseup
mouseleave
mouseover
mouseenter
mouseout
mousemove

页面坐标：
event.pageX
event.pageY
屏幕坐标：
event.screenX
event.screenY
修改键
相关元素
鼠标按钮：0，1，2（左中右）

键盘与文本事件

keydown
keyup
keypress
键码（event.keyCode）：对应ascii码

textInput事件

event.data

变动事件

DOMSubtreeModified
DOMNodeInserted
DOMNodeRemoved
DOMNodeInsertedIntoDocument
DOMNodeRemovedFromDocument
DOMAttrModified
DOMCharacterDataModified

HTML5事件

contextmenu事件
beforeunload事件
DOMContentLoaded事件
readystatechange事件: event.readyState
haschange事件

内存和性能

事件委托
移除事件处理程序

模拟事件