DOM 事件

Posted shihaiying

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM 事件相关的知识,希望对你有一定的参考价值。

㈠事件流

?事件:是文档和浏览器窗口中发生的,特定的交互瞬间。

?事件流:描述的是从页面中接受事件的顺序

 

⑴DOM事件冒泡

定义:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播至最不具体的那个节点(文档)。

 

具体讲解

代码:

<html>
<head>
     <title>事件流<title>
     <meta charset="utf-8"></head>
<body>
      <div id="box">
      <input type="button" value="按钮" id="btn">
      </div>
</body>
</html>

说明:点击按钮,浏览器就会认为:你点按钮的同时,也点击了包含这个按钮的这个容器(“div”),那么你点了这个div以后,它又认为你点了整个HTML了,那么你点了整个HTML,它又认为你点了整个document。也就是说:click事件在input上触发,那么它会一级一级往上冒,最后直到冒到document。

 

⑵DOM事件捕获

定义:不太具体的节点应该更早接受到事件,而最具体的节点最后接受到事件。

 

具体讲解

代码:

<html>
<head>
     <title>事件流<title>
     <meta charset="utf-8"></head>
<body>
      <div id="box">
      <input type="button" value="按钮" id="btn">
      </div>
</body>
</html>

说明:用事件捕获的思想:它认为最先把事件用document接收了,然后让HTML接收了,然后又让body接收,然后又让div接收了,最后才被input接收了。

 

㈡事件处理程序

⑴ HTML事件处理程序

含义:你的事件直接加在HTML结构里

具体解释

代码:

<html>
<head>
     <title>事件流<title>
     <meta charset="utf-8"></head>
<body>
      <div id="box">
      <input type="button" value="按钮" id="btn" onclick="alert(‘hello‘)">
      </div>
</body>
</html>

说明:直接将onclick事件加在input标签上,而且是在HTML结构里

 

:并不是所有要执行的JS代码都应该写在这个地方,也可以把它封装在这个函数内

代码:

<html>
<head>
     <title>事件流<title>
     <meta charset="utf-8"></head>
<body>
      <div id="box">
      <input type="button" value="按钮" id="btn" onclick="showMessage()">
      </div>
     <script>
            function showMessage(){
                        alert(hello world!);
              }
     </script>
</body>
</html>

 

HTML事件的缺点:HTML和JS代码紧密的耦合在一起

具体解释:如果要更换事件处理程序,就要修改两个地方:HTML代码和JS函数

 

 DOM0级事件处理程序 

这种方法是一种较为传统的方式:把一个函数赋值给一个事件的处理程序属性

这是用的比较多的方法,原因是简单,跨浏览器的优势

代码示例

<html>
<head>
     <title>事件流<title>
     <meta charset="utf-8"></head>
<body>
      <div id="box">
      <input type="button" value="按钮" id="btn" onclick="showMes()">
       <input type="button" value="按钮2" id="btn2" >
      </div>
     <script>
            function showMes(){
                        alert(hello world!);
              }
            var btn2=document.getElementById(btn2);   //取得btn2按钮对象
            btn2.onclick=function(){                    //给btn2添加onclick属性
                   alert(这是通过DOM0级添加的事件!);
             }
             btn2.onclick=null;            //删除onclick属性
     </script>
</body>
</html>

优点:1)没有HTML事件的缺点

           2)可以给一个元素上添加多个事件处理程序,这些事件处理程序会按顺序执行。

 

 DOM2级事件处理程序

DOM2级事件定义了两个方法

用于处理指定和删除事件处理程序的操作

addEventListener()  和 removeEventListener()。

 

接收三个参数

1) 要处理的事件名

2) 作为事件处理程序的函数

3) 布尔值(true表示在捕获阶段调用事件处理程序;false表示在冒泡阶段调用事件处理程序)

 

代码示例:

<html>
<head>
     <title>事件流<title>
     <meta charset="utf-8"></head>
<body>
      <div id="box">
      <input type="button" value="按钮" id="btn" onclick="showMes()">
      <input type="button" value="按钮2" id="btn2" >
      <input type="button" value="按钮3" id="btn3" >
      </div>
     <script>
            function showMes(){
                        alert(hello world!);
              }
            var btn2=document.getElementById(btn2);  
            var btn3=document.getElementById(btn3);
            btn2.onclick=function(){  
                   alert(这是通过DOM0级添加的事件!);
             }
             btn2.onclick=null; 
            //DOM2级事件
           btn3.addEventListener(onclick,showMes,false);   //给btn3添加一个事件监听程序   兼容各种浏览器
            //删除事件
           btn3.removeEventListener(onclick,showMes,false);
     </script>
</body>
</html>

 

优点:可以给一个元素上添加多个事件处理程序,这些事件处理程序会按顺序执行。

代码示例

<html>
<head>
     <title>事件流<title>
     <meta charset="utf-8"></head>
<body>
      <div id="box">
      <input type="button" value="按钮" id="btn" onclick="showMes()">
      <input type="button" value="按钮2" id="btn2" >
      <input type="button" value="按钮3" id="btn3" >
      </div>
     <script>
            function showMes(){
                        alert(hello world!);
              }
            var btn2=document.getElementById(btn2);  
            var btn3=document.getElementById(btn3);
            btn2.onclick=function(){  
                   alert(这是通过DOM0级添加的事件!);
             }
             btn2.onclick=null; 
            //DOM2级事件
           btn3.addEventListener(onclick,showMes,false); 
           btn3.addEventListener(onclick,function(){
             alert(this.value);引用被触发的元素
           },false);
           
     </script>
</body>
</html>

注意:在IE浏览器中不起作用。

 

⑷IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

 

接收相同的两个参数:

事件处理程序的名称和事件处理程序的函数

 

不使用第三个参数的原因:IE8及以更早的浏览器版本只支持事件冒泡!

 代码示例

<html>
<head>
     <title>事件流<title>
     <meta charset="utf-8"></head>
<body>
      <div id="box">
      <input type="button" value="按钮" id="btn" onclick="showMes()">
      <input type="button" value="按钮2" id="btn2" >
      <input type="button" value="按钮3" id="btn3" >
      </div>
     <script>
            function showMes(){
                        alert(hello world!);
              }
            var btn2=document.getElementById(btn2);  
            var btn3=document.getElementById(btn3);
            btn2.onclick=function(){  
                   alert(这是通过DOM0级添加的事件!);
             }
             btn2.onclick=null; 
            //IE事件处理程序
           btn3.attachEvent(onclick,showMes); 
           btn3.detachEvent(onclick,showMes);
           
     </script>
</body>
</html>

 注意:只在IE浏览器和Opera浏览器中使用

 

⑸跨浏览器的事件处理程序

方法:恰当的使用能力检测

问题:如何实现跨浏览器解决事件处理程序?

通过将增加和删除封装在一个对象里面,封装了两个方法,每个方法都进行了能力检测,你支持这个方法,就用这个方法,不支持这个方法,就用所支持的方法。

代码示例

<html>
<head>
     <title>事件流<title>
     <meta charset="utf-8"></head>
<body>
      <div id="box">
      <input type="button" value="按钮" id="btn" onclick="showMes()">
      <input type="button" value="按钮2" id="btn2" >
      <input type="button" value="按钮3" id="btn3" >
      </div>
     <script>
            function showMes(){
                        alert(hello world!);
              }
            var btn2=document.getElementById(btn2);  
            var btn3=document.getElementById(btn3);
            btn2.onclick=function(){  
                   alert(这是通过DOM0级添加的事件!);
             }
             btn2.onclick=null; 
            //跨浏览器事件处理程序
            vareventUtil={
            //添加句柄
            addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent(on+type,handler);
            }else{
                element[on+type]=handler;
            }
          },
          //删除句柄
 
           removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent(on+type,handler);
            }else{
                element[on+type]=null;
            }
          }
        }
        eventUtil.addHandler(btn3,click,showMes);
        eventUtil.removeHandler(btn3,click,showMes);
</script>
</body>
</html>

以上是关于DOM 事件的主要内容,如果未能解决你的问题,请参考以下文章

jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段

java解析xml的几种方式哪种最好?

jQuery的DOM操作

JavaScript单行代码,也就是代码片段

实用代码片段将json数据绑定到html元素 (转)

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup )(代码片段