javascript学习笔记 第13章 事件

第13章

事件流

事件冒泡

事件捕获

事件处理程序

HTML事件处理程序

<input type="button" value="chick me" οnclick="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事件

内存和性能

事件委托

移除事件处理程序

模拟事件