分享浏览器的事件模型-Web前端之家

分享浏览器的事件模型。首先要知道DOM的两级模式：DOM0级和DOM2级
在DOM0级事件处理程序是通过把函数实例的引用指派到DOM元素的属性而声明的。

声明DOM第0级事件处理程序，代码如下：

<!DOCTYPE> 
<html> 
<head> 
<title>DOM Level 0 Events Example</title> 
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
$('#vstar')[0].onmouseover = function(event) { 
say('Whee!'); 
} 
}); 
function say(text) { 
$('#console').append('<div>'+new Date()+' '+text+'</div>'); 
} 
</script> 
</head>
<body> 
<img id="vstar" src="vstar.jpg" onclick="say('Vroom vroom!')"/> 
<div id="console"></div> 
</body> 
</html>

事件冒泡：在目标元素获得机会处理事件之后，事件模型检查目标元素的父元素，看是否为同类型事件建立了处理程序。如果是，则也调用父元素的处理程序。再检查其父元素，直至检查到DOM树的顶部，这个过程称之为事件冒泡。

事件传播从起点到DOM树的顶部，代码如下：

<!DOCTYPE> 
<html id="greatgreatgrandpa"> 
<head> 
<title>DOM Level 0 Bubbling Example</title> 
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
        $('*').each(function(){ 
        var current = this; 
        this.onclick = function(event) { 
        if (!event) event = window.event; 
        var target = (event.target) ? 
        event.target : event.srcElement; 
        say('For ' + current.tagName + '#'+ current.id + 
        ' target is ' + target.id); 
        } 
        }); 
    }); 
    function say(text) { 
        $('#console').append('<div>'+text+'</div>'); 
    } 
</script> 
</head> 

<body id="greatgrandpa"> 
<div id="grandpa"> 
<div id="pops"> 
<img id="vstar" src="vstar.jpg"/> 
</div> 
</div> 
<div id="console"></div> 
</body> 
</html>

DOM第2级事件模型
DOM第0级的缺点是，属性被用于存储作为事件处理程序的函数的引用，所以每个元素对于任何特定的事件类型，每次只能注册一个事件处理程序。

DOM第2级事件模型（也称为监听器）被设计来解决这些类型的问题。每个DOM元素都定义名为addEventListener()的方法，用于把事件处理程序(监听器)附加到元素上。这个方法的格式如下所示：

addEventListener(enentType,listener,useCapture)

参数eventType是一个字符串，用于标识将要处理的时间类型。例如：click、mouseover、keydown等。
参数listener是函数的引用（或内联函数），用于在元素上建立指定类型的处理程序。
参数useCapture是布尔类型。
利用DOM第2级模型建立事件处理程序，代码如下：

<!DOCTYPE> 
<html> 
<head> 
<title>DOM Level 2 Events Example</title> 
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"> 
</script> 
<script type="text/javascript"> 
    $(function(){ 
        var element = $('#vstar')[0]; 
        element.addEventListener('click',function(event) { 
        say('Whee once!'); 
        },false); 
        element.addEventListener('click',function(event) { 
        say('Whee twice!'); 
        },false); 
        element.addEventListener('click',function(event) { 
        say('Whee three times!'); 
        },false); 
        }); 
        function say(text) { 
        $('#console').append('<div>'+text+'</div>'); 
    }) 
</script> 
</head> 
<body> 
    <img id="vstar" src="vstar.jpg"/> 
    <div id="console"></div> 
</body> 
</html>