JS中的事件处理和文档处理应该记住哪些内容。。。

本文链接：https://blog.youkuaiyun.com/lipeng88888888/article/details/78628478

1.事件：

    当 ..... 时候，执行....操作。
    当对电脑或者网页做任何操作，都会伴随某个功能的实现（函数的执行）
    javascript 就是基于事件驱动的语言

2.添加事件的方式：
    [1] 内联方式：
        在HTML标签中，使用事件属性添加事件

   <button οnclick="testEvent1()">内联方式</button>
   <script type="text/javascript">
       /**
          
          事件处理函数：当事件触发时，所执行的函数
       */
       function testEvent1() {
          alert("点击事件被触发");
       }
   </script>

        缺点：
            ① 若给一个元素添加多个事件时，发现标签中各种事件属性
            ② 随着HTML的增加，标签量是急剧增加同时，事件要在整个HTML中充斥着；那么对事件的维护也变得困难。
    [2] 脚本模式：
        将所有的事件处理代码，写到js脚本中。做到HTML代码和js代码的分离。
        语法：
            DOM对象.事件属性 = function() {
                //事件处理
            }
            注意：必须要先获取到要添加事件的元素。

     //脚本模式添加事件
       var btn = document.getElementById("btn");
       /*
          1.onclick 事件：其实就是dom对象的一个方法
          2.方法的调用不是开发人员来调用的，而是由浏览器调用的。
          3.当点击btn这个按钮时，浏览器会自动调用onclick事件的处理函数。
       */
       btn.onclick = function() {
          alert("脚本模式");
       }

        缺点：学习难度大，相对于事件属性的方式，更加困难。

3.常用事件：
    1）鼠标相关：
        onclick : 点击事件
        onmouseover ：鼠标移入事件
        onmouseout : 鼠标移出事件

  <h1>欲穷千里目,更上一层楼。</h1>
   <script type="text/javascript">
       //1.获取要添加事件的元素
       var h1 = document.getElementsByTagName("h1")[0];
       //2、添加鼠标移入事件
       h1.onmouseover = function() {
          // this : 当前对象，在事件处理函数中，this就代表添加事件的对象
          console.log(this);
          // 将h1的字体颜色，设置为红色
          this.style.color = "red";
       }
       //3.鼠标移出事件
       h1.onmouseout = function() {
          this.style.color = "black";
       }
   </script>

    2）表单相关：经常用于表单验证
        onfocus ：获取焦点事件，当操作元素时，会触发获取焦点事件
        onblur : 失去焦点事件，当结束对此元素的操作时，就会触发此事件
        onchange ：表单元素内容改变事件
        onsubmit ：表单提交事件

  <input type="text" name="username" />
   <select id="city">
       <option>北京</option>
       <option>上海</option>
       <option>广州</option>
       <option>深圳</option>
   </select>
   <script type="text/javascript">
       var input = document.getElementsByName("username")[0];
       //添加获取焦点事件
       input.onfocus = function() {
          console.log("获取焦点事件触发");
       }
       //失去焦点事件
       input.onblur = function() {
          console.log("失去焦点事件");
       }
       
       //内容改变事件，用在select和checkbox时候比较多
      document.getElementById("city").onchange = function() {
          console.log("内容改变事件");
       }
       
   </script>

    3）其他事件：
        onload : 文档就绪事件,当body中所有的dom元素加载完毕时，会触发onload事件

<script type="text/javascript">
//1.window 窗口加载完毕时，触发 onload 事件
//2.将所有的事件处理，写在onload事件的处理函数中
window.onload = function() {
   //1.获取要添加事件的元素
   var h1 = document.getElementsByTagName("h1")[0];
   //2、添加鼠标移入事件
   h1.onmouseover = function() {
       // this : 当前对象，在事件处理函数中，this就代表添加事件的对象
       console.log(this);
       // 将h1的字体颜色，设置为红色
       this.style.color = "red";
   }
   //3.鼠标移出事件
   h1.onmouseout = function() {
       this.style.color = "black";
   }
}
</script>

总结：
    1）添加事件的方式
    2）常用事件：
        onclick、onfocus、onblur、onchange、onsubmit、onload

对DOM节点进行增删操作
1）创建节点：
    var 节点对象 = document.createElement("标签名称");
    给节点添加属性：

      //1.创建节点
       var tr = document.createElement("tr");
       console.log(tr);
       var td = document.createElement("td");
       //2.给节点对象添加属性
       td.innerHTML = "姓名";
       console.log(td);

2）追加节点：
parent节点.appendChild(ele) : 将ele元素，追加到parent节点的末尾
将子元素添加到父元素中

   <table border="1" cellpadding="5" cellspacing="0"></table>
   <button οnclick="addElement()">追加</button>
   
   <script type="text/javascript">
       var index = 0;
       function addElement() {
          index ++;
          //1.创建节点
          var tr = document.createElement("tr");
          console.log(tr);
          var td = document.createElement("td");
          var td1 = document.createElement("td");
          //2.给节点对象添加属性
          td.innerHTML = "姓名" + index;
          td1.innerHTML = "性别" + index;
          console.log(td);
          //将td追加到tr的末尾
          tr.appendChild(td);
          tr.appendChild(td1);
          console.log(tr);
          //将tr追到到table的末尾
          var table = document.getElementsByTagName("table")[0];
          table.appendChild(tr);
       }
   </script>

3）删除节点：
parent.removeChild(child) : 通过父元素parent删除子元素child
注意：删除子元素，要找到父元素

   <table border="1" cellpadding="5" cellspacing="0"></table>
   <div>
       <h1>哈哈</h1>
   </div>
   <button οnclick="addElement()">追加</button>
   <button οnclick="deleteElement()">删除table</button>
   
   <script type="text/javascript">
       function deleteElement() {
          //var table = document.getElementsByTagName("table")[0];
          var body = document.getElementsByTagName("body")[0];
          //body.removeChild(table);
          var h1 = document.getElementsByTagName("h1")[0];
          var parent = h1.parentNode;//获取父节点
          parent.removeChild(h1);
       }
   </script>

存一念爱异时便是爱己，

有一步进德处胜于进官。