javascript事件详解1

事件流讲解来袭，嘎嘎嘎嘎嘎

----------------------------------------------------------------

1.事件流：描述的是在页面中接受事件的顺序。

2.事件冒泡：由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）。

3.事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。

--------------------------------------------------------------------

事件处理：

1.HTML事件处理：直接添加到HTML结构中（例：之前的onclick等，可以往前查看例子）。

2.DOM0级事件处理：把一个函数赋值给一个事件处理程序属性。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例（针对2）：<div id="div">

                                <button id="btn">按钮</button>

                    </div>

                     <script>

                                   var btn1=document.getElementById("btn");

                                   btn.οnclick=function(){

                                            alert("hello,DOM0级事件处理程序1。");

                                     }

                      </script>

           结果：界面出现，鼠标点击按钮后，弹出对话框

若在上述代码中稍做改变：

                    <div id="div">

                                <button id="btn">按钮</button>

                    </div>

                     <script>

                                   var btn1=document.getElementById("btn");

                                   btn.οnclick=function(){

                                            alert("hello,DOM0级事件处理程序1。");

                                     }

                                 btn1.οnclick=function(){

                                                alert("hello,DOM0级事件2.");

                                   }

                      </script>

               结果：界面出现一按钮，鼠标点击后弹出对话框

 

我们可以发现对二个函数对第一个进行了覆盖，即这就是DOM0级事件的缺点。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3.DOM2级事件处理：

  （1）addEventListener("事件名"，“事件处理函数”，“布尔值”)

                     true：事件捕获。

                     false:事件冒泡。

 （2）removeEventListener();

详细前几我上篇里面的 DOM EventListener.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

例：

        

             <div id="div">

                                <button id="btn">按钮</button>

             </div>

           <script>

                   var btn1=document.getElementById("btn").addEventListener("click",demo);

                   function demo(){

                                 alert("DOM2事件。");

                             }

           </script>    

结果：按钮，点击按钮，弹出提示框DOM2事件。

优点：对比于DOM0级事件，DOM2级不会有覆盖现象。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

-----------------------------------------------------------------------------------------

 4.IE事件处理程序

         attachEvent:添加事件；

         detachEvent:移除事件。

（ps:这两个的运用原理跟addEventListener()和removeEventListener()差不多，只是涉及到浏览器的是否能执行后用的，处理兼容问题。）

-------------------------------------------------------------------------------------------

例：(解决了兼容问题的例子，综合例子。)

       <div>

             <button id="btn1">按钮</div>

      </div>

      <script>

             var btn1=document.getElementById("btn1");

             if(btn1.addEventListener()){

                      btn1.addEventListener("cilck",demo);

               }else if(btn1.attachEvent){

                      btn1.attachEvent("onclick",demo);

                 }else{

                      btn1.οnclick=demo();

                  }

             function demo(){

                    alert("综合例子");

             }

     </script>

      

转载于:https://www.cnblogs.com/yanyuanyuan/p/5717838.html