Dom0级事件

<!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>

  

你可能感兴趣的:(dom)