DOM详解-JavaScript

阳光穿透心脏的1/2处 2022-09-10 13:21 156阅读 0赞

# DOM #

### 文章目录 ###

*  DOM
 *   *   *  dom
         *  事件
         *  页面加载
         *  dom查询
         *  dom增删改
         *  样式操作
         *   *   *  获取内部样式
                 *  创建函数返回具体样式（考虑兼容）
                 *  修改样式封装
                 *  元素大小和偏移量
         *  事件对象
         *  事件冒泡
         *  事件委托
         *  事件绑定
         *  事件传播

### dom ###

DOM（Document Object Model），文档对象模型。

通过dom模型可以让sj操作页面中的html标签和样式，从而改变页面的结构和样式

*  document（文档）：表示整个html网页文件（各种标签）

html标签存在完整的层次结构

*  object（对象）：当浏览器将html加载到内存中会自动生成每个标签对应的对象，以便js可以对象。js操作对象相当于操作标签。

操作对象：获取更改属性，调用方法

*  model（模型）：html存在层次结构，生成的对象也会存在层次结构。这种层次结构被称为模型，即对象之间的关系。
 *  节点（Node）：构成html文档的基本单元，网页中的所有内容都是节点。整个文档也是一个节点

节点分类：文档节点(整个html文档)，元素节点(html文档中的标签)，属性节点(标签的属性)，文本节点(标签中的文本内容)

节点不同，属性和方法不同。

浏览器中已经提供了文档节点对象，这个对象可以直接使用，也是window的对象。

document对象代表的是整个页面

浏览器加载html文件后自动创建的document对象，就是文档节点对象。

//通过id获取button按钮对应的dom属性
    var btn = document.getElementById("btn");
    //操作属性
    btn.innerHtml = "点击按钮";
    //操作
    btn.onclick = function(){
        
        alert("被点击");
    }

1.  通过dom模型获取需要操作的对象。
2.  调用对象对应的属性或方法，通过逻辑动态改变页面的效果。

### 事件 ###

事件：用户与浏览器直接的交互行为，某些场景下发生的“事情”；比如：点击，双击，关闭等

事件关注的三个方面：

1.  事件源：事件产生的来源；
2.  事件：发生的“事件”本身，当事件被触发，浏览器会自动产生事件对象
3.  事件处理（回调函数）：事件发生后被调用的函数。

在html元素上设置属性的方式来监听事件，结构（html）和事件（js）进行了耦合，不方便维护，可以进行拆分，推荐拆分的方式处理。

使用拆分的方式处理页面中标签绑定的事件：

1.  获取页面的标签对象
2.  设置事件，绑定事件处理（回调函数）

<button id="btn">
        
    </button>
    <script>
        //获取标签对象
    	var btn = document.getElementById('btn');
        //设置事件属性，绑定回调函数---事件发生时，函数才调用
        btn.onclick = () => {
          
            //逻辑代码
            alert("btn被点击");
        }
    </script>

### 页面加载 ###

浏览器在加载页面时，由上而下顺序加载，读一行执行一行。

如果script标签写在页面的上方，则html还没被读取，通过js获取的标签对象就会为null，所以我们需要在 页面加载完毕之后，再执行js代码，读取页面中的标签。

将js代码在访问页面加载之后时间之后执行，使用window.onload事件。

<button id="btn">
        
    </button>
    <script>
        window.onload = function(){
          
            //获取标签对象
    		var btn = document.getElementById('btn');
        	//设置事件属性，绑定回调函数---事件发生时，函数才调用
        	btn.onclick = () => {
          
            	//逻辑代码
            	alert("btn被点击");
        	}
        }
        
    </script>

### dom查询 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig_size_16_color_FFFFFF_t_70_g_se_x_16_pic_center]

1.  通过document对象的方法查询dom节点
    
     *  getElememtById(id)
        
         *  根据ID获取指定的节点对象
         *  返回一个结点对象或null
     *  getElementByTagName()
        
         *  根据标签名称获取一组节点对象
         *  返回值为数组对象，即使一个元素也会封装到数组中返回
     *  getElementByName(name值)
        
         *  根据标签name的值获取一组元素节点对象
         *  返回值为数组对象
     *  document.body：获取body标签。
     *  document.documentElement：获取html标签。
     *  document.all：获取所有标签。
     *  document.getElementByClassName(类名):获取类标签。
     *  document.querySelect(选择器)：获取一个标签。
     *  document.querySelectAll(选择器)：获取一类标签，返回一个伪数组。
    
    innerHTML：(属性)
    
    获取元素内部的html代码。
2.  通过层级节点查询

元素.getElementsByTagName(标签名);

*  根据标签名称获取当前元素下的所有子节点。
 *  返回当前节点指定标签下的后代节点。

元素.childNodes  
\- 返回包括文本节点在内的所有子节点。  
\- DOM规定，标签和标签之间的空白也会成为文本节点。

元素.children

\- 返回当前元素下的所有子元素，不包括空白文本。

元素.firstChild / 元素.childNodes\[0\]

\- 返回当前元素下的第一个节点，包括空白文本节点。

元素.firstElementChild

\- 返回当前元素下的第一个子元素,排除空白节点。

节点.nodeName ： 获取节点名称  
节点.nodeType ： 获取节点类型  
节点.nodeValue ： 获取节点值

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
          
                width: 800px;
                margin-left: auto;
                margin-right: auto;
            }
    
            button {
          
                width: 300px;
                margin-bottom: 10px;
            }
    
            #btnList {
          
                float: left;
            }
    
            #total {
          
                width: 450px;
                float: left;
            }
    
            ul {
          
                list-style-type: none;
                margin: 0px;
                padding: 0px;
            }
    
            .inner li {
          
                border-style: solid;
                border-width: 1px;
                padding: 5px;
                margin: 5px;
                background-color: #99ff99;
                float: left;
            }
    
            .inner {
          
                width: 400px;
                border-style: solid;
                border-width: 1px;
                margin-bottom: 10px;
                padding: 10px;
                float: left;
            }
        </style>
        <script>
            window.onload = function(){
          
    
                //为btn01绑定单击事件
                var btn01 = document.getElementById('btn01');
                // alert(btn01);
                btn01.onclick = function(){
          
                    //查找#bj节点 --- li元素
                    var bj = document.getElementById('bjx');
                    // alert(bj);
                    // console.log(bj);
                    //获取li中的文本内容
                    // console.log(bj.innerHTML);
                };
    
                //为btn02绑定点击事件
                var btn02 = document.getElementById("btn02");
                btn02.onclick = function(){
          
                    //查找所有的li节点
                    var lis = document.getElementsByTagName("li");
                    // console.log(lis); //HTMLCollection
                    // console.log(lis.length); //获取数组的长度
                    //循环遍历元素
                    for(var i = 0; i < lis.length; i++){
          
                        console.log(lis[i].innerHTML); //获取的包含html
                    }
                };
                //为btn03绑定点击事件
                var btn03 = document.getElementById("btn03");
                btn03.onclick = function(){
          
                    //查找name=gender的所有节点
                    var inputs = document.getElementsByName("gender");
                    /*
                        描述：
                          - 如果需要获取元素节点的属性
                            直接使用：元素.属性名
                            注意：class属性需要：元素.className
                    
                    */
                    //返回的数组
                    // console.log(inputs.length);
                    for(var i = 0; i < inputs.length; i++){
          
                        //获取input标签的value值
                        console.log(inputs[i].value, inputs[i].type, inputs[i].name, inputs[i].className);
                    }
                };
                
                //获取city下的所有li
                //获取btn04的节点
                var btn04 = document.getElementById("btn04");
                //为btn04绑定点击事件
                btn04.onclick = function(){
          
                  // 获取city节点
                  var city = document.getElementById("city");
                  // 获取city下的所有li节点
                  var lis = city.getElementsByTagName("li");
                  console.log(lis);
                  for(var i = 0;i < lis.length;i++){
          
                    console.log(lis[i].innerHTML);
                  }
                };
    
                // 获取city写的所有子节点
                //获取btn05的节点
                var btn05 = document.getElementById("btn05");
                //为btn04绑定点击事件
                btn05.onclick = function(){
          
                  // 获取city节点
                  var city = document.getElementById("city");
                  // 获取city下的所有li节点
                  var allNodes = city.childNodes;
                  var allNodes02 = city.children;
                  console.log(allNodes);
                  console.log(allNodes02);
                  for(var i = 0;i < allNodes.length;i++){
          
                    console.log(allNodes[i].innerHTML);
                  };//有空白文本
                  for(var i = 0;i < allNodes02.length;i++){
          
                    console.log(allNodes02[i].innerHTML);
                  }//没有空白文本
                };
    
                //返回phone的第一个子节点
                // 获取btn06的节点
                var btn06 = document.getElementById("btn06");
                btn06.onclick = function(){
          
                  var phone = document.getElementById("phone");
                  var first = phone.firstChild;//第一个子节点，包括空白文本
                  var first02 = phone.firstElementChild;//返回第一个子节点，不包括空白文本
                  console.log(first);
                  console.log(first02);
                };
    
                //返回bj的父节点
                 // 获取btn07的节点
                 var btn07 = document.getElementById("btn07");
                  btn07.onclick = function(){
          
                  var bj = document.getElementById("bj");
                  var parent = bj.parentNode;
                  var parent02 = bj.parentElement;
                  console.log(parent);
                  console.log(parent02);//两个返回值相同
                  console.log(parent.innerHTML);//返回带标签
                  console.log(parent.innerText);//返回文本内容不带标签
                };
    
                // 返回#android的前一个兄弟节点
                var btn08 = document.getElementById("btn08");
                  btn08.onclick = function(){
          
                    var android = document.getElementById("android");
                    var bro = android.previousSibling;//返回空白文本
                    var bro02 = android.previousElementSibling;//返回<li>IOS</li>
                    var bro03 = android.nextSibling;//返回空白文本
                    var bro04 = android.nextElementSibling;//返回<li>Windows Phone</li>
                    console.log(bro);
                    console.log(bro02);
                    console.log(bro03);
                    console.log(bro04);
    
                  };
    
                  // 返回#username的value属性值
                var btn09 = document.getElementById("btn09");
                  btn09.onclick = function(){
          
                    var username = document.getElementById("username");
                    var value = username.value;
                    console.log(value);
                  };
    
    
                  // 设置#username的value属性值
                var btn10 = document.getElementById("btn10");
                  btn10.onclick = function(){
          
                    var username = document.getElementById("username");
                    username.value="ccccccc";
                  };
    
                  //返回#bj的文本值
                  var btn11 = document.getElementById("btn11");
                  btn11.onclick = function(){
          
                  var bj = document.getElementById("bj");
                  console.log(bj.innerText);
                  
                };
    
    
            };
        </script>
    </head>
    
    <body>
        <dl>
    
        </dl>
        <div id="total">
            <div class="inner">
                <p>
                    你喜欢哪个城市?
                </p>
    
                <ul id="city">
                    <li id="bj"><a href="#">北京</a></li>
                    <li>上海</li>
                    <li>东京</li>
                    <li>首尔</li>
                </ul>
    
                <br>
                <br>
    
                <p>
                    你喜欢哪款单机游戏?
                </p>
    
                <ul id="game">
                    <li id="rl">红警</li>
                    <li>实况</li>
                    <li>极品飞车</li>
                    <li>魔兽</li>
                </ul>
    
                <br />
                <br />
    
                <p>
                    你手机的操作系统是?
                </p>
    
                <ul id="phone">
                    <li>IOS</li>
                    <li id="android">Android</li>
                    <li>Windows Phone</li>
                </ul>
            </div>
    
            <div class="inner">
                gender:
                <input class="hello" type="radio" name="gender" value="male" />
                男
                <input class="hello" type="radio" name="gender" value="female" />
                女
                <br>
                <br>
                name:
                <input type="text" name="name" id="username" value="abcde" />
            </div>
        </div>
        <div id="btnList">
            <div><button id="btn01">查找#bj节点</button></div>
            <div><button id="btn02">查找所有li节点</button></div>
            <div><button id="btn03">查找name=gender的所有节点</button></div>
            <div><button id="btn04">查找#city下所有li节点</button></div>
            <div><button id="btn05">返回#city的所有子节点</button></div>
            <div><button id="btn06">返回#phone的第一个子节点</button></div>
            <div><button id="btn07">返回#bj的父节点</button></div>
            <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
            <div><button id="btn09">返回#username的value属性值</button></div>
            <div><button id="btn10">设置#username的value属性值</button></div>
            <div><button id="btn11">返回#bj的文本值</button></div>
        </div>
    </body>
    </html>

### dom增删改 ###

*  document.createElement(标签名);  
    创建元素节点对象
 *  document.createTextNode(‘文本内容’);  
    创建文本节点对象
 *  父节点.appendChild(子节点);  
    向父节点中添加一个子节点
 *  父节点.insertBefore(新节点, 旧节点);  
    将指定的子节点前插入新的子节点
 *  父节点.replaceChild(新节点, 旧节点);  
    使用指定的子节点替换已有的子节点
 *  父节点.removeChild(子节点);  
    子节点.parentNode.removeChild(子节点);  
    删除指定的子节点

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            window.onload =function(){
          
                /*
                    参数：
                      id ： 标签的id值
                      callBack： 回调函数
                */
                var $ = function(id, callBack) {
          
                    var btn = document.getElementById(id);
                    btn.onclick = callBack;
                };
    
                // 添加成都
                $('add',function(){
          
                    //创建li节点 ---- <li>成都</li>
                    var li = document.createElement('li');
    
                    //创建文本节点
                    var txt = document.createTextNode('成都');
    
                    //将文本节点添加到li节点中
                    li.appendChild(txt);
    
                    //将创建的li添加到页面中 --- ul中
                    var ul = document.getElementById('city');
                    ul.appendChild(li);
                });
    
                //添加广州节点到西安之上
                $('insert', function(){
          
                    //创建广州节点
                    var li = document.createElement('li');
                    var txt = document.createTextNode('广州');
                    li.appendChild(txt);
    
                    //获取西安节点
                    var xian = document.getElementById('xian');
                    var city = document.getElementById('city');
                    
                    city.insertBefore(li, xian);
                });
    
                //使用广州节点替换西安节点
                $('replace',function(){
          
                      //创建广州节点
                    var li = document.createElement('li');
                    var txt = document.createTextNode('广州');
                    li.appendChild(txt);
    
                    //获取西安节点
                    var xian = document.getElementById('xian');
                    var city = document.getElementById('city');
                    
                    city.replaceChild(li, xian);
                });  
                
                //删除西安节点
                $('delete',function(){
          
                     //获取西安节点
                     var xian = document.getElementById('xian');
                    //  var city = document.getElementById('city');
    
                    //  city.removeChild(xian);
    
                    xian.parentNode.removeChild(xian);
                });
    
                //获取#city内的HTML代码
                $('findHTML', function(){
          
                    var city = document.getElementById('city');
                    alert(city.innerHTML);
                });
    
                //设置#xian下的HTML代码
                $('setHTML', function(){
          
                    var xian = document.getElementById('xian');
                    // xian.innerHTML = '小寨';
                    xian.innerHTML = '<a href="#">小寨 </a>';
                });
    
                //使用innerHTML创建节点
                $('createHTML', function(){
          
                    //使用innerHTML创建广州节点
                    var city = document.getElementById('city');
                    city.innerHTML += '<li>广州</li>';
    
                    //使用两种方式结合
                    var guangzhou = document.createElement('li');
                    guangzhou.innerHTML = '广州';
                    city.appendChild(guangzhou);
                });
            };
    
        </script>
        <ul id="city">
            <li>北京</li>
            <li>上海</li>
            <li id="xian">西安</li>
        </ul>
        <button id="add">添加成都</button>
        <button id="insert">添加广州节点到西安之上</button>
        <button id="replace">使用广州节点替换西安节点</button>
        <button id="delete">删除西安节点</button>
        <button id="findHTML">获取#city内的HTML代码</button>
        <button id="setHTML">设置#xian下的HTML代码</button>
        <button id="createHTML">使用innerHTML创建节点</button>
    </body>
    </html>

### 样式操作 ###

通过元素.style可以获取当前标签对应的样式对象。

通过style样式对象可以对css样式进行修改。

style.样式名只能获取内联样式。

通过元素.style修改的样式为标签的内联样式。

样式命名规则：

如果css中的样式存在横杠(-)，则去掉-，使用驼峰命名法。如：background-color转换为backgroundColor。

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        div{
          
          width: 100px;
          height: 100px;
          background-color: pink;
        }
      </style>
    </head>
    <body>
      <div style="width: 200px;"></div>
      <script>
        window.onload = function(){
          
          var div = document.getElementsByTagName('div')[0];
          div.onclick = function (){
          
            console.log(div.style);
            div.style.backgroundColor = 'green';
          }
        }
      </script>
    </body>
    </html>

##### 获取内部样式 #####

IE浏览器：通过 元素.currentStyle.样式名 的方式只有IE浏览器可以获取相应的样式。

其它浏览器：

getcomputedStyle(元素,null)

参数：

第一个参数：需要获取元素的样式对象

第二个参数：可以创建一个伪元素，一般都用null

返回样式对象，对象中封装了元素对应的样式信息

样式对象.样式名称：获取具体信息

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        div{
          
          width: 100px;
          height: 100px;
          background-color: red;
        }
      </style>
    </head>
    <body>
      <div></div>
      <script>
        window.onload = function(){
          
          var div = document.getElementsByTagName("div")[0];
          //IE浏览器
          //console.log(div.currentStyle);
          //console.log(div.currentStyle.width);
          //console.log(div.currentStyle.height);
          //其它浏览器,IE8以下不支持
          var styleObj = window.getComputedStyle(div,null)
          console.log(styleObj);
          console.log(styleObj.width);
          console.log(styleObj.height);
          styleObj.width = '300px';
          styleObj.height = '300px';
    
        }
      </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig_size_15_color_FFFFFF_t_70_g_se_x_16_pic_center]

通过 元素.currentStyle.或get computedStyle获取的样式信息为只读信息，不能修改

styleObj.width = '300px';
          styleObj.height = '300px';

![在这里插入图片描述][1efe29d1aa90480489e2928d83d91684.png_pic_center]

##### 创建函数返回具体样式（考虑兼容） #####

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        div{
          
          width: 100px;
          height: 100px;
          background-color: red;
        }
      </style>
    </head>
    <body>
      <div></div>
      <script>
        window.onload = function(){
          
          var div = document.getElementsByTagName("div")[0];
          var w =   getStyle(div,'width');
          function getStyle(obj,styleName){
          
            //非IE8以下
            if(window.getComputedStyle){
          
              return window.getComputedStyle(div,null)[styleName];
            }else{
          
              //IE8以下
              return obj.currentStyle[styleName];
            }
          }
          console.log(w);
        }
      </script>
    </body>
    </html>

getComputedStyle参数：

obj：需要获取样式的元素

styleName：样式名称

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig_size_12_color_FFFFFF_t_70_g_se_x_16_pic_center]

##### 修改样式封装 #####

通过修改class的值可以一次修改多种样式

修改时需要使用 元素.className

通过 +=和空格可以添加多个class

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .boxRed {
          
          width: 200px;
          height: 200px;
          background-color: red;
        }
        .boxYellow{
          
          width: 300px;
          height: 300px;
          background-color: yellow;
        }
        .boxSize{
          
          font-size: 20px;
          color: white;
        }
    
      </style>
    </head>
    <body>
      <button id="btn">修改样式</button>
      <div id="box" class="boxRed">字体</div>
      <script>
        window.onload = function(){
          
          var btn = document.getElementById('btn');
          // var box = document.getElementById('box');
          btn.onclick = function(){
          
            //更改样式
            var div = document.getElementById('box');
            //修改class值
            //添加boxYellow类
            div.className = 'boxYellow';
            //添加boxSize类
            div.className += ' boxSize';
          }
        }
      </script>
    </body>
    </html>

##### 元素大小和偏移量 #####

clientWidth/clientHeight

获取元素的可见高度和宽度

返回的属性值不带px，是一个数字，可以直接进行运算

包括内容区和内边距，不带边框

属性为只读属性，不能更改。

offsetWidth/offsetHeight

和clientWidth相似，只是带边框

offsetParent

获取离当前元素最近的开启了定位的祖先元素

如果所有祖先元素没有定位则返回body

offsetLeft/offsetTop

获取当前元素相对于其定位的父元素的水平/垂直偏移量

scrollWidth/scrollHeight

获取元素整个滚动区域的宽度和高度

scrollLeft/scrollTop

获取元素水平或垂直滚动条滚动的距离

### 事件对象 ###

onmouseover：鼠标移动事件

事件对象：

当事件响应函数被触发时，浏览器会生成一个和事件本身相关联的对象传递给回调函数。这个对象包含了事件的一切信息，比如鼠标的坐标，按键的值等等。这个对象被称为事件对象

事件对象由系统自动产生

clientX、clientY 获取鼠标指针的水平坐标和垂直坐标

### 事件冒泡 ###

事件冒泡就是事件向上传导机制，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发

如果不希望事件冒泡，则可以通过事件对象取消冒泡：事件对象.cancelBubble = true；

开发中事件冒泡大多数有用

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #box{
          
                width: 200px;
                height: 200px;
                background-color: red;
            }
            #sp {
          
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <script src="tool.js"></script>
        <script>
                window.onload = function(){
          
                    //获取span标签对象
                    var span = $('sp');
                    span.onclick = function(e){
          
                        console.log('span被点击');
                        //取消事件
                        e.cancelBubble = true;
                    };
    
                    //获取div标签对象
                    var div = $('box');
                    div.onclick = function(){
          
                        console.log('div被点击');
                    };
    
                    //获取body标签对象
                    var body = document.body;
                    body.onclick = function(){
          
                        console.log('body被点击');
                    }
                };
    
        </script>
        <div id="box">
            div文本
            <span id="sp">span文本</span>
        </div>
    </body>
    </html>

### 事件委托 ###

将事件统一绑定为祖先元素，当后代元素上的事件被触发时，会一直冒泡到祖先元素上，从而通过祖先元素的回调函数来处理事件

事件委托是利用了事件的冒泡机制，委托可以减少事件的绑定次数，提高程序的性能。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script src="tool.js"></script>
        <script>
            window.onload = function () {
          
                //获取所有a标签
                var all = document.getElementsByTagName('a');
                var ul = $('add');
                //添加li标签
                $('btn').onclick = function () {
          
                    /*
                        每创建一个新的a标签，多需要重新绑定点击事件
                    */
                    var li = document.createElement('li');
                    li.innerHTML = '<a href="javascript:;" class="link">连接四</a>';
                    ul.append(li);
                };
    
                //统一给父元素绑定一次事件
                ul.onclick = function (e) {
          
                    //判断是否为a标签
                    if(e.target.className == 'link'){
          
                        console.log('a被点击');  
                    };
                };
            };
        </script>
        <button id="btn">添加链接</button>
        <ul id="add" style="background-color: #ccc">
            <li><a href="javascript:;" class="link">连接一</a></li>
            <li><a href="javascript:;" class="link">连接二</a></li>
            <li><a href="javascript:;" class="link">连接三</a></li>
        </ul>
    </body>
    </html>

### 事件绑定 ###

1.  元素对象.事件名称 = 回调函数
    
    一个元素的相同事件只能绑定一次响应函数，不能绑定多个，如果绑定多个，后面的会覆盖前面的。
2.  元素.addEventListener()–IE8以下不支持
    
    参数：
    
    1.  事件字符串：去掉on；
        
        1.  回调函数：事件触发时需要相应的函数
        2.  是否在捕获阶段触发事件，boolean类型，一般设置为false
    
    一个元素的相同事件可以多次绑定，执行的顺序为绑定的顺序。
3.  元素.attachEvent()—IE8以下支持，其他浏览器不支持
    
    参数：
    
    1.  事件字符串：需要on
    2.  回调函数：事件触发时需要相应的函数
    
    一个元素的相同事件可以多次绑定，执行顺序和绑定顺序相反。

### 事件传播 ###

1.  网景和微软对事件的传播有不同的实现方式

微软：事件由内向外传播（先触发当前元素，再向祖先元素传播），也被成为事件冒泡。

网景：事件由外向内传播（先触发当前元素最外层的祖先元素，再向子元素传播，直到当前元素停止），也不称为事件捕获阶段。

1.  W3C将事件分为三个阶段
    
     *  捕获阶段：从最外层的祖先元素，向目标元素进行实际的捕获，但默认不执行回调函数。
     *  目标阶段：事件捕获到目标元素，捕获结束，开始在目标元素上触发事件。
     *  冒泡阶段：事件从目标元素向祖先元素传递，依次触发祖先元素上的事件。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig_size_16_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/8d4e9cb1d79d425197464057894ab795.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig_size_15_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/7795871f440e49c4ac7a86115f5a443e.png
[1efe29d1aa90480489e2928d83d91684.png_pic_center]: /images/20220829/e259b35aedda4eeaa2208dcb73b5f2e9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5oiR5pivRHJlYW1lcuWVig_size_12_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/b5020cbf38a14e68be34d590f1fc8db6.png