<!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. Unity Layout碰撞检测

    第一次看到LayerMask根本不知道是什么东东,后来问问度娘,看了几篇文章,终于看明白一点点,在网上看到各路大神的解释,终于明白了,LayerMask实际上是一个位码操作,在Unity3d中Laye ...

  2. mysql 5.6

    mysql 5.6的安裝: 1,提前安装依赖的库环境. yum install -y  make bison cmake gcc-c++ ncurses ncurses-devel  git 2,下载 ...

  3. （导航控制器view）全屏幕滑动实现pop效果

    看到现在app 中越来越流行的手势滑动实现pop效果,心里很是痒痒跃跃欲试,经过多方查看资料,终于在简书上找到了详细的实现方案: 轻松学习之二——iOS利用Runtime自定义控制器POP手势动画 经 ...

  4. tostring的用法

    ToString()可空参数单独使用,同时可以加一个格式化参数,具体方式如下: . 取中文日期显示_年月 currentTime.ToString("y"); 格式:2007年1月 ...

  5. 学php之翻译wordpress(2)

    wp-load.php <?php /** * Bootstrap file for setting the ABSPATH constant * and loading the wp-conf ...

  6. HTML5数组方法

    ***************************** forEach方法 *****************************   <script>var data = [1, ...

  7. ORA-06502: PL/SQL: 数字或值错误 : 字符串缓冲区太小 错误分析

    目录(?)[+] 1. 问题起因 最近在进行Oracle的一些操作时,总会遇到这个错误:  ORA-06502: PL/SQL: 数字或值错误 :  字符串缓冲区太小,错误如下: ORA-00604: ...

  8. 新版703n刷openwrt

    自带的官方固件: 3.17.1 Build 140120 Rel.56593n WR703N v1 00000000 在不能web页面刷固件,因为带了校验功能. 老外给出了不上TTL刷路由的方法: h ...

  9. 软件看门狗--别让你地程序无响应（使用未公开API函数IsHungAppWindow，知识点较全）

    正文一．概述一些重要的程序,必须让它一直跑着:而且还要时时关心它的状态——不能让它出现死锁现象.当然,如果一个主程序会出现死锁,肯定是设计或者编程上的失误.我们首要做的事是,把这个Bug揪出来.但如果 ...

  10. tty/pts 相关指令

    http://unix.stackexchange.com/questions/136662/how-can-we-know-whos-at-the-other-end-of-a-pseudo-ter ...