×

分享浏览器的事件模型

作者:web1762017.03.06来源:Web前端之家浏览:10609评论:0
关键词:JQueryJS
分享浏览器的事件模型。首先要知道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>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/biji34.html

网友评论文明上网理性发言 已有0人参与

发表评论: