关于JavaScript与HTML的交互事件(4)

function removeEvent(node, type, handler) {
            if (!node) return false;
            if (node.removeEventListener) {
                node.removeEventListener(type, handler, false);
                return true;
            }
            else if (node.detachEvent) {
                node.detachEvent('on' + type, node[type + handler]);
                node[type + handler] = null;
            }
            return false;
        }

John Resig很巧妙地利用了闭包，看起来很不错。

事件对象

在触发DOM上的某个事件的时候会产生一个事件对象event，这个对象包含着所有与事件有关的信息，包括产生事件的元素、事件类型等相关信息。所有浏览都支持event对象，但支持方式不同。

DOM中的事件对象兼容DOM的浏览器会产生一个event对象传入事件处理程序中。应用一下刚才我们写的addEvent方法

复制代码 代码如下:

var btnClick = document.getElementById('btnClick');
    addEvent(btnClick, 'click', handler);

点击button的时候我们可以看到弹出内容是click的弹窗

event对象包含与创建它的特定事件有关的属性和方法，触发事件的类型不同，可用的属性和方法也不同，但是所有事件都会包含

属性/方法

 

类型

 

读/写

 

说明

 
bubbles   Boolean   只读   事件是否冒泡  
cancelable   Boolean   只读   是否可以取消事件的默认行为  
currentTarget   Element   只读   事件处理程序当前处理元素  
detail   Integer   只读   与事件相关细节信息  
eventPhase   Integer   只读   事件处理程序阶段：1 捕获阶段，2 处于目标阶段，3 冒泡阶段  
preventDefault()   Function   只读   取消事件默认行为  
stopPropagation()   Function   只读   取消事件进一步捕获或冒泡  
target   Element   只读   事件的目标元素  
type   String   只读   被触发的事件类型  
view   AbstractView   只读   与事件关联的抽象视图，等同于发生事件的window对象  
在事件处理程序内部，this始终等同于currentTarget，而target是事件的实际目标。

要阻止事件的默认行为，可以使用preventDefault（）方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为

复制代码 代码如下: