<!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. UGUI实现的虚拟摇杆，可改变摇杆位置

    实现方式主要参考这篇文章:http://www.cnblogs.com/plateFace/p/4687896.html. 主要代码如下: using UnityEngine; using Syste ...

  2. [有向图的强连通分量][Tarjan算法]

    https://www.byvoid.com/blog/scc-tarjan 主要思想 Tarjan算法是基于对图深度优先搜索的算法,每个强连通分量为搜索树中的一棵子树.搜索时,把当前搜索树中未处理的 ...

  3. Javascript进阶篇——( 事件响应)笔记整理

    什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 鼠标单击事件(on ...

  4. WCF Rest：不使用UriTemplate使用post方式传参解决HTTP400问题以及参数映射问题

    在使用POST方式向服务提交数据时,出现HTTP400异常,以下代码描述: 服务接口定义: [OperationContract] [WebInvoke(ResponseFormat = WebMes ...

  5. 获取Location

    1.连接一个二进制的库用来定位 CoreLocation Build Phases中加号添加 2.对于ios8.0以上的需要配置 NSLocationWhenInUseUsageDescription ...

  6. ps 网页布局

    910  1680  找一个页面作为参考   双击小手回到正常视角 新建组  把他们放到一个组里  新建组改名(创意专家)  放入一个图片 内发光投影  Shiftalt  复制 新建组  改名创意案 ...

  7. illegal to have multiple occurrences of contentType with different values (old: text/html; charset=UTF-8, new: text/html; charset=utf-8)

    问题描述: 在a.jsp通过<%@ include file="b.jsp" %> 的方式引入b.jsp,但是报了标题的中的错误, 问题原因: 在a.jsp的头部: & ...

  8. Git使用笔记（一）

    今天第一次使用Git,在本地和CSDN Code进行代码同步.鉴于“好记性不如烂笔头”的经验教训,特把步骤记录下来. 准备工作: 1. 在CSDN(或者Github)上注册一个帐号,然后创建一个Rep ...

  9. python解析xml

    python解析xml import xml.dom.minidom as minidom dom = minidom.parse("aa.xml") root = dom.get ...

  10. drupal7创始人root忘记密码的解决办法

    在index.php中的drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);之后加入 require_once 'includes/password.inc'; echo ...