<!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. 【巧妙算法系列】【Uva 11464】 - Even Parity 偶数矩阵

    偶数矩阵(Even Parity, UVa 11464) 给你一个n×n的01矩阵(每个元素非0即1),你的任务是把尽量少的0变成1,使得每个元素的上.下.左.右的元素(如果存在的话)之和均为偶数.比 ...

  2. Android 打开系统相册和系统视

    1.打开系统相册 Intent intent = new Intent(Intent.ACTION_VIEW); intent.setType("vnd.android.cursor.dir ...

  3. js下拉菜单默认值为当前年份，下拉菜单的选项为当前年份往前推5年

    1:在jsp或者HTML页面中新建一个下拉框 年度:<select id="cx_nd" name="cx_nd" style="width: ...

  4. C++程序设计实践指导1.6分数运算改写要求实现

    改写要求:重载>>和<<实现分数类对象的直接输入输出,重载+完成多个分数对象加法 #include <cstdlib> #include <iostream& ...

  5. linux常用命令--diff

    diff是Unix系统的一个很重要的工具程序. 它用来比较两个文本文件的差异,是代码版本管理的基石之一.你在命令行下,输入: $ diff <变动前的文件> <变动后的文件> ...

  6. Haproxy+PXC实现负载均衡

    软件负载均衡一般通过两种方式来实现:基于操作系统的软负载实现和基于第 三方应用的软负载实现.LVS就是基于Linux操作系统实现的一种软负载,HAProxy就是开源的并且基于第三应用实现的软负载.HA ...

  7. 菜单之二：使用xml文件定义菜单

    参考<疯狂android讲义>2.10节 P174,参见归档project:XmlMenuDemo.zip 一般推荐使用XML文件定义菜单. 基本步骤如下: 1.定义布局文件 为简单显示原 ...

  8. jq插件又来了，模拟select下拉框，支持上下方向键哦

    好久没来了,更新下插件, 这个原理就是利用的 input[type='hidden']和自定义属性data-value捆绑传值操作的,可是设置默认选项,回调等参数,代码不多,比较简单,吼吼 (func ...

  9. newifi升级固件及开启SSH

    1.固件去官方社区下载 2.开启SSH  连接newifi访问http://192.168.99.1/newifi/ifiwen_hss.html  看到返回success  说明开启SSH 3.使用 ...

  10. DNA Sorting--hdu1379

    DNA Sorting Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...