你的位置:首页 > Java教程

[Java教程]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.onclick=function(){

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

                                     }

                      </script>

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

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

                    <div id="div">

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

                    </div>

                     <script>

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

                                   btn.onclick=function(){

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

                                     }

                                 btn1.onclick=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.onclick=demo();

                  }

             function demo(){

                    alert("综合例子");

             }

     </script>