JS事件机制

简介: javascript中有两种事件模型:DOM0,DOM2。而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些。DOM0级事件模型DOM0级事件模型是早期的事件模型,所有的浏览器都是支持的,而且其实现也是比较简单。

javascript中有两种事件模型:DOM0,DOM2。而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些。

DOM0级事件模型

DOM0级事件模型是早期的事件模型,所有的浏览器都是支持的,而且其实现也是比较简单。代码如下:

<p id = 'click'>click me</p>
<script>
    document.getElementById('click').onclick = function(event){
        alert(event.target);
    }
</script>

这种事件模型就是直接在dom对象上注册事件名称,这段代码就是在p标签上注册了一个onclick事件,在这个事件函数内部输出点击的目标。而解除事件则更加简单,就是将null复制给事件函数,如下:

document.getElementById('click'_).onclick = null;

由此我们可以知道dom0中,一个dom对象只能注册一个同类型的函数,因为注册多个同类型的函数的话,就会发生覆盖,之前注册的函数就会无效。

var click = document.getElementById('click');
click.onclick = function(){
    alert('you click the first function');
};
click.onclick = function(){
    alert('you click the second function')
}

在这段代码中,我们为dom对象注册了两个onclick函数,但是结果是只执行了第二个注册的函数,前面所注册的函数被覆盖了。

DOM2级事件模型

事件捕获和事件冒泡(capture,bubble)

首先,IE8及以下是不支持这种事件模型的。事件捕获和事件冒泡的机制如下图:
image
如上图所示,123代表事件捕获,4567代表事件冒泡。

DOM2级的注册事件和解除事件

在DOM2级中使用addEventListener和removeEventListener来注册和解除事件(IE8及之前版本不支持)。这种函数较之之前的方法好处是一个dom对象可以注册多个相同类型的事件,不会发生事件的覆盖,会依次的执行各个事件函数。

<html>
    <head>
        <meta charset="utf-8">
    </head>
    
    <body>
        <div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'>
            <div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div>
        </div>
    </body>
    
    <script>
        /*var click = document.getElementById('inner');
        click.addEventListener('click',function(){
            alert('click inner one');
        },false);
        
        click.addEventListener('click',function(){
            alert('click inner two');
        },false);
        
        document.getElementById('outer').addEventListener('click',function(){
            alert('click outer');
        },false);
        
        document.addEventListener('click',function(){
            alert('click document');
        },false);
        
        document.getElementsByTagName("html")[0].addEventListener('click',function(){
            alert('click html');
        },false);*/
        
        
        
        
        
        /*var click = document.getElementById('inner');
        click.addEventListener('click',function(){
            alert('click inner one');
        },true);
        
        click.addEventListener('click',function(){
            alert('click inner two');
        },true);
        
        document.getElementById('outer').addEventListener('click',function(){
            alert('click outer');
        },true);
        
        document.addEventListener('click',function(){
            alert('click document');
        },true);
        
        document.getElementsByTagName("html")[0].addEventListener('click',function(){
            alert('click html');
        },true);*/
        
        /*document.addEventListener('click',function(event){
            alert('click document');
            //event.stopPropagation();
        },true);
        
        document.getElementsByTagName("html")[0].addEventListener('click',function(event){
            alert('click html');
            event.stopPropagation();
        },true);
        
        document.getElementById('outer').addEventListener('click',function(event){
            alert('click outer');
            //event.stopPropagation();
        },true);
        
        var click = document.getElementById('inner');
        click.addEventListener('click',function(event){
            alert('click inner one');
            //event.stopPropagation();
        },true);
        
        click.addEventListener('click',function(event){
            alert('click inner two');
            //event.stopPropagation();
        },true);*/
        
        //冒泡事件
        document.addEventListener('click',function(event){
            alert('click document pop');
            event.stopPropagation();
        },false);
        
        document.getElementsByTagName("html")[0].addEventListener('click',function(event){
            alert('click html pop');
            event.stopPropagation();
        },false);
        
        document.getElementById('outer').addEventListener('click',function(event){
            alert('click outer pop');
            //event.stopPropagation();
        },false);
        
        var click = document.getElementById('inner');
        click.addEventListener('click',function(event){
            alert('click inner one pop');
            event.stopPropagation();
        },false);
        
        click.addEventListener('click',function(event){
            alert('click inner two pop');
            event.stopPropagation();
        },false);
        
        
    </script>
</html>
相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
2月前
|
存储 JavaScript 前端开发
深入理解JavaScript中的事件循环(Event Loop):机制与实现
【10月更文挑战第12天】深入理解JavaScript中的事件循环(Event Loop):机制与实现
87 3
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
39 3
|
3月前
|
JavaScript 安全 前端开发
乾坤js隔离机制
乾坤js隔离机制
|
26天前
|
JavaScript 安全 中间件
深入浅出Node.js中间件机制
【10月更文挑战第36天】在探索Node.js的奥秘之旅中,中间件的概念如同魔法一般,它让复杂的请求处理变得优雅而高效。本文将带你领略这一机制的魅力,从概念到实践,一步步揭示如何利用中间件简化和增强你的应用。
|
1月前
|
消息中间件 JavaScript 中间件
深入浅出Node.js中间件机制
【10月更文挑战第24天】在Node.js的世界里,中间件如同厨房中的调料,为后端服务增添风味。本文将带你走进Node.js的中间件机制,从基础概念到实际应用,一探究竟。通过生动的比喻和直观的代码示例,我们将一起解锁中间件的奥秘,让你轻松成为后端料理高手。
29 1
|
2月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
50 6
|
2月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
23 1
|
2月前
|
JSON JavaScript 中间件
深入浅出Node.js中间件机制
本文将带你探索Node.js中一个核心概念——中间件机制。我们将通过浅显的语言和生动的比喻,揭示中间件如何作为请求和响应之间的“交通枢纽”,在应用程序中起到至关重要的作用。从基础原理到实际应用,你将了解到中间件不仅简化了代码结构,还提高了开发效率,是Node.js开发不可或缺的一部分。
54 1
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
24 5