重拾Javascript基础(四) - BOM&DOM事件

事件阶段

javascript事件在两个阶段中执行：捕获和冒泡。

 

事件对象

IE存储在window.event，其他浏览器则以参数传入。  

this关键字

指向执行事件的节点对象  

取消事件冒泡

e.stopPropagation(); window.event.cancelBubble();  

重装浏览器的默认行为

e.preventDefault(); window.event.returnValue = false;  

绑定事件监听函数

.onevent = function(){}; 优点： 简单、稳定、统一; this指向节点对象。 缺点： 只能在冒泡时执行; 一个节点只能绑定一个事件函数; 参数型事件对象在IE下无。 .addEventListener(eventName, function(){}, true[捕获]|false[冒泡]) 优点： 可以指定捕获或冒泡时执行; this指向节点对象; 可以绑定多个事件函数。 缺点： IE下无用 .attachEvent(eventName, function(){}); 优点： 可以绑定多个函数 缺点： 仅在冒泡时执行; this上下文指向window对象;

// Dean Edwards编写的addEvent/removeEvent
function addEvent(element, type, handler)
{
    // 为每个事件处理函数赋予一个独立的ID
    if(!handler.$$guid) handler.$$guid = addEvent.guid++;

    // 为元素建立一个事件类型的散列表
    if(!element.events) element.events = {};

    // 为每对元素/事件建立一个事件处理函数的
    var handlers = element.events[type]
    if(!handlers)
    {
        handlers = element.events[type] = {};
        if(element['on'+type])
        {
            handlers[0] = element['on'+type];
        }
    }

    handlers[handler.$$guid] = handler;

    element['on'+type] = handleEvent;
}

addEvent.guid = 1;

function removeEvent(element, type, handler)
{
    if(element.events && element.events[type])
    {
        delete element.events[type][handler.$$guid];
    }
}
function handleEvent(event)
{
    var returnValue = true;

    event = event||fixEvent(window.event);

    var handlers = this.events[event.type];

    for(var i in handlers)
    {
        this.$$handleEvent = handlers[i];
        if(this.$$handleEvent(event) === false)
        {
            returnValue = false;
        }
    }
    return returnValue;
}
function fixEvent(event)
{
    event.preventDefault = fixEvent.preventDefault;
    event.stopPropagation = fixEvent.stopPropagation;
    return event;
}
fixEvent.preventDefault = function()
{
    this.returnValue = false;
}
fixEvent.stopPropagation = function()
{
    this.cancelBubble = true;
}

事件对象

一、 通用属性： 1、类型(type) 当前触发的事件名称 2、目标(target/srcElement) 3、停止冒泡(stopPropagation/cancelBubble) 4、阻止默认行为(preventDefault()/returnValue=false) 二、鼠标属性： 1、相对于窗口的鼠标位置(clientX/clientY) 2、相对于文档的鼠标位置(pageX/pageY) 3、相对于事件目标元素的鼠标位置(layerX/layerY ; offsetX/offsetY) 4、button 点击鼠标按钮数字 5、relateTarget 三、键盘属性： 1、ctrlKey 2、keyCode 3、shiftKey

页面事件

1、load 2、beforeunload 3、error 4、resize 5、srcoll 6、unload

UI事件

1、focus 2、blur

鼠标事件

1、click 2、dbclick 3、mousedown 4、mouseup 5、mousemove 6、mouseover 7、mouseout

键盘事件

1、keypress/keydown 2、keyup

表单事件

1、select 2、change 3、submit 4、reset