DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。

最新推荐文章于 2024-05-18 09:25:19 发布

壮壮嘻嘻

最新推荐文章于 2024-05-18 09:25:19 发布

阅读量7.7k

点赞数 2

分类专栏： fe 文章标签： javascript dom 默认事件事件模型事件委托

本文链接：https://blog.csdn.net/u013194113/article/details/52027275

版权

本文深入解析JavaScript中的DOM事件，包括DOM0、DOM2、DOM3事件模型，事件基础知识，事件委托，阻止默认事件和阻止冒泡事件。介绍了事件注册、事件流的概念，以及不同浏览器的兼容性问题和解决方法。通过实例展示了事件委托的原理和优势，以及如何阻止事件的冒泡和传播。

摘要由CSDN通过智能技术生成

原生JavaScript事件详解：
http://www.cnblogs.com/iyangyuan/p/4190773.html

DOM0,DOM2,DOM3事件,事件基础知识入门

DOM0,DOM2,DOM3事件,事件基础知识入门：http://www.cnblogs.com/diligenceday/p/4175721.html
[解惑]JavaScript事件机制：
http://www.cnblogs.com/hustskyking/p/problem-javascript-event.html

　　事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互;
　　事件有DOM0, DOM2和DOM3的区分(别问我怎么少了一个DOM1, 也没找到DOM1的信息啊,);

　　DOM0就是直接通过 onclick写在html里面的事件, 比如:

<input onclick="alert(1)" />

　　DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定;
　　DOM3是一些新的事件, 区别DOM3和DOM2的方法我感觉是DOM3事件有分大小写的,DOM2没有;

　　事件流
　　
　　
　　IE的事件流是冒泡, 从里面往上面冒, netscape是从外部元素往内部元素捕获;
　　而DOM2级的事件规定了事件流包含三个阶段包括： 1：事件捕获， 2：处于目标阶段， 3：事件冒泡阶段（IE8以及更早版本不支持DOM事件流）;

DOM0事件

事件模型在不断发展，早期的事件模型称为DOM0级别。

DOM0事件模型，所有的浏览器都支持。直接在dom对象上注册事件名称，就是DOM0写法.

  document.getElementById("test").onclick = function(e){};

意思就是注册一个onclick事件。当然，它和这种写法是一个意思：

document.getElementById("test")["onmousemove"] = function(e){};

　　
基于DOM0的事件，对于同一个dom节点而言，只能注册一个，后边注册的同种事件会覆盖之前注册的。接下来再说说this。事件触发时，this就是指该事件在哪个dom对象上触发。想解除事件就相当简单了，只需要再注册一次事件，把值设成null

var btn = document.getElementById("test");
        btn.onclick = function(e){
          alert("ok");
        };

原理就是最后注册的事件要覆盖之前的，最后一次注册事件设置成null，也就解除了事件绑定。

　　DOM0的事件具有极好的跨浏览器优势, 会以最快的速度绑定, 如果你通过DOM2绑定要等到JS运行, DOM0不用, 因为DOM0是写在元素上面的;

DOM2事件

DOM2支持同一dom元素注册多个同种事件。
DOM2新增了捕获和冒泡的概念。
DOM2事件通过addEventListener和removeEventListener管理，当然，这是标准。

注册事件时，通常使用捕获或冒泡的。事件只会因为捕获或者冒泡触发一次.
addEventListener当然就是注册事件，她有三个参数，分别为：”事件名称”, “事件回调”, “捕获/冒泡”

    obj.addEventListener("click", func, true); // 捕获方式
    obj.addEventListener("click", func, false); // 冒泡方式

DOM2事件的冒泡和捕获
事件名称就不用多说了，相比DOM0，去掉了前边的on而已。
事件回调也很好理解，事件触发了总得通知你吧！回调时和DOM0一样，也会默认传入一个event参数，同时this是指触发该事件的dom节点。
最后一个参数是布尔型，true代表捕获事件，false代表冒泡事件。

   <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <meta charset="utf-8" />
            <style type="text/css">
                #p { width: 300px; height: 300px; padding: 10px;  border: 1px solid black; }
                #c { width: 100px; height: 100px; border: 1px solid red; }
            </style>
        </head>
        <body>
        <div id="p">
            parent
            <div id="c">
                child
            </div>
        </div>
        <script type="text/javascript">
            var p = document.getElementById('p'),
                    c = document.getElementById('c');
            c.addEventListener('click', function () {
    
                alert('子节点捕获')
            }, true);

            c.addEventListener('click', function (e) {
    
                alert('子节点冒泡')
            }