<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <style type ="text/css">

        div {

         border:1px solid #0094ff;

         width:50%;

         padding:50px;

        }

    </style>

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script type ="text/javascript">

        $(function () {

            //1 DOM 0级事件特点

            //1.1相同domu、元素的相同属性 只能注册一个方法，如果注册多个，则会被后面的覆盖

            // 本质原因：onclick等0级事件，本质就是dom对象的一个属性（方法类型）如果多次赋值，则会覆盖前面的

            document.getElementById("btnO").onclick = function () {

                alert("我是0级事件");

            };

            document.getElementById("btnO").onclick = function () {

                alert("111111111111");

            };

            //1.2 使用的是事件冒泡：由内往外

            document.getElementById("divFather").onclick = function () {

                alert("divFather");

            };

            document.getElementById("divSon").onclick = function () {

                alert("divSon");

            };

            //2 dom2级事件特点：

            //2.1 注册的方式使用不一样

            //2.2 注册事件方法时 可以选择 捕获阶段事件(true)，也可以选择冒泡阶段事件（false） 老式IE浏览器要加onclick

            document.getElementById("btn2").attachEvent("onclick", test2);

            document.getElementById("btn2").detachEvent(test2);//老式IE浏览器的移除方法IE7及IE7以下

            document.getElementById("btn2").addEventListener("click", function () { alert("btn2"); }, true);

            document.getElementById("div1").addEventListener("click", function () { alert("div1"); }, true);

            document.getElementById("div2").addEventListener("click", function () { alert("div2"); }, true);

            //2.3     2 级dom事件相同元素的相同事件 可以注册多个方法，而且可以动态移除指定方法

            document.getElementById("btn2").addEventListener("click", test2, false);//如果要移除方法，注册方法必须要以这种方式

            //移除方法

            document.getElementById("btn2").removeEventListener("click",test2);

        });

        //JQ所有方法都是使用二级事件

        function test2()

        {

        }

    </script>

</head>

<body>

    0级事件 会将 方法直接设置给dom对象对应的事件属性（如 ：onclick）

    <div id="divFather" >

        <div id="divSon">

             <input type ="button"  value ="Dom0级事件" id ="btnO"/>

        </div>

    </div>

    2级事件 不会将方法设置给dom对象的事件属性，而是使用了另外一套机制来保存事件方法

    <div id="div1" >

        <div id="div2">

             <input type ="button"  value ="Dom0级事件" id ="btn2"/>

        </div>

    </div>

</body>

</html>

　　

Dom0级事件的更多相关文章

  1. dom0级事件和dom2级事件

    dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...

  2. 测试DOM0级事件和DOM2级事件的堆叠

    1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...

  3. 【20190226】JavaScript-知识点记录：dom0级事件，dom2级事件

    DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...

  4. JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

    JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...

  5. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

  6. DOM0级事件误区－addEventListener

    百度上很多篇文章讲解addEventListener DOM0级事件的时候讲解的都是覆盖 概念如下: 同一个元素的同一种事件只能绑定一个函数,否则后面的函数会覆盖之前的函数 其实不然,官方讲解:添加的 ...

  7. js DOM0级事件和DOM2级事件

    注册事件有两种方式,分别是DOM0级和DOM2级 DOM0级就是通过事件绑定的形式dom元素只能有(绑定)一个事件处理函数,他的特点是同一个元素绑定相同事件, 后面函数会覆盖前面的 绑定: dom.o ...

  8. DOM0级事件处理和DOM2级事件处理

    转自:http://www.cnblogs.com/holyson/p/3914406.html 0级DOM 分为2个:一是在标签内写onclick事件  二是在JS写onlicke=function ...

  9. DOM0级事件绑定之js的onclick事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. hive大数据倾斜总结

    在做Shuffle阶段的优化过程中,遇到了数据倾斜的问题,造成了对一些情况下优化效果不明显.主要是因为在Job完成后的所得到的 Counters是整个Job的总和,优化是基于这些Counters得出的 ...

  2. html css js 框架

    html css js 框架 Bootstrap http://www.bootcss.com/ http://www.cnblogs.com/aehyok/p/3404867.html        ...

  3. photoswipe

    allowUserZoom: 允许用户双击放大/移动方式查看图片. 默认值 = trueautoStartSlideshow: 当PhotoSwipe激活后,自动播放幻灯片. 默认值 = falsea ...

  4. Windows7中安装内存与可用内存不一致的解决办法

    转载:http://blog.sina.com.cn/s/blog_56741a420100h9d1.html 问题现象: 安装完Windows7后,在计算机->属性中,会看到安装内存.但有时在 ...

  5. C# 和Java的foreach的不同用法

    循环语句为苦逼的程序猿们提供了很大的便利,有while.do...while.for和 foreach.而且foreach语句很简洁,但是它的优点不仅仅在于此,它的效率也是最高的. 作为两个开发语言, ...

  6. PlSql复制角色、权限和添加角色权限

    一.登录你想要复制数据库的用户

  7. JAVA异常使用_每个人都曾用过、但未必都用得好

    一.抛出异常 vs. 返回错误代码 有人说“Well, an exception is a goto.”,但也有人言“makes the code simpler by visibly separat ...

  8. AdapterView及其子类之一：基本原理（ListView、ListActivity类型）

    参考<疯狂android讲义>2.5节 1.AdapterView一般用于显示列表项,其内容由Adapter提供.调用Adapter的setAdapter(Adapter)方法设置Adap ...

  9. python运维开发(九)----socket

    内容目录: socket通信过程 单线程socket 多线程socket ThreadingTCPServer socket socket通常也称作"套接字",用于描述IP地址和端 ...

  10. Django学习(三) Django模型创建以及操作

    在Django中可以建立自己的模型Model,这里对应Java里的实体类,跟数据库表是对应的.其中用到了django.db模块中的models.如下图所示: mysite/news/models.py ...