Javascript事件

Posted 2020-09-30 Nnn_Lillian

事件：可以被javascript侦测到的行为，例如

• onClick——单击事件
• onMouseOver——鼠标经过事件
• onMouseOut——鼠标移出事件
• onChange——文本内容改变事件
• onSelect——文本框选中事件
• onFocus——光标聚集事件
• onBlur——移开光标事件
• onLoad——网页加载事件
• onUnload——关闭网页事件

当然，这里的事件并不全面，只是说一些比较常用的

事件流

1. 事件流

   描述的是在页面中接受事件的顺序

2. 事件冒泡

   由最具体的元素先接受事件，然后逐级向上传播至最不具体的元素的节点（文档）[button -> div ->文档]

3. 事件捕获

   最不具体的节点先接收事件，而最具体的节点应该是最后接收事件[文档 -> div ->button]

事件处理

1. html事件处理

   直接添加到HTML结构中

   代码示例：

   <button onclick="demo1()">HTML事件处理</button>
   <script>
       function demo1()
           {
               alert("HTML事件处理");
            }
   </script>        

   点击 后，执行方法弹出：

    缺点：当代码有一处需要修改时，牵连到的部分都需要被修改。

2. DOM0级事件处理

   把一个函数赋值给一个事件处理程序属性

   代码示例：

   <button id="dom0Btn">DOM0级事件</button>
   <script>
       var dom0Btn = document.getElementById("dom0Btn");
       dom0Btn.onclick = function(){ alert("DOM0级事件处理1") };
   </script>
   

   此时点击后，将弹出：

   优点：当代码有一处需要修改时，不需所有牵连到的部分都要修改。

    

   【问题】如果有多个事件的话，会产生问题。

   代码示例：

   <button id="dom0Btn">DOM0级事件</button>
   <script>
       var dom0Btn = document.getElementById("dom0Btn");
       dom0Btn.onclick = function(){ alert("DOM0级事件处理1") };//被下面的一条代码给覆盖掉了
       dom0Btn.onclick = function(){ alert("DOM0级事件处理2") };
   </script>
   

   此时点击后，将弹出：  之前的事件就会被最后一个事件覆盖掉。

   缺点：如果有多个事件，那么将会执行最后一个事件，之前的事件都被覆盖掉。

3. DOM2级事件处理

   addEventListener（“事件名”，“事件处理函数”，“布尔值”）：添加事件 
   true：捕获
   false：冒泡
   removeEventListener() ：移除事件

   代码示例：

   <button id="dom2Btn">DOM2级事件</button>
   <script>
       var dom2Btn = document.getElementById("dom2Btn");
       dom2Btn.addEventListener("click",demo2);
       dom2Btn.addEventListener("click",demo3);
       dom2Btn.addEventListener("click",demo4);
       function demo2() { alert("DOM2级事件处理1");}
       function demo3() { alert("DOM2级事件处理2");}
       function demo4() { alert("DOM2级事件处理3");}
       dom2Btn.removeEventListener("click",demo3);
   </script>
   

   此时点击后，弹出： 点击【确定】后再弹出 因为方法demo3()在第10行被移除了。所以只显示两个事件。它不会用新的事件覆盖之前的事件。

4. IE事件处理

   attachEvent() 
   detachEvent()                 
   以上的两种方法用法同addEventListener和removeEventListener。主要针对IE8及以下的浏览器。

   为了针对不同的浏览器，事件添加都成功，可以有如下代码。

   代码示例：

   <button id="eveBtn">事件处理</button>
   <script>
       var eveBtn = document.getElementById("eveBtn");
       if(eveBtn.attachEvent){
           eveBtn.attachEvent("onclick",demo5);
       }else if(eveBtn.addEventListener){
           eveBtn.addEventListener("click",demo5);
       }else{
           eveBtn.onclick = demo5();
       }
       function demo5(){
           alert("事件处理")
       }
   </script>            

　　　　　　　　同一个事件处理，三种不同的方式，主要看能执行哪个。

事件对象

1. 事件对象

   在触发DOM事件的时候都会产生一个对象，并且事件对象会存在很多属性和方法供我们使用

2. 事件对象event

   1. type：获取事件类型（例如：click，mouseover）

      代码示例：

      <button id="typeBtn">获取事件类型</button>
      <script>
          var typeBtn = document.getElementById("typeBtn");
          typeBtn.addEventListener("mouseover",showType);
          function showType(event) {
              alert(event.type);
          }
      </script>
      

       

   2. target：获取事件目标（就是当前事件作用于谁）

      代码示例：

      <div>
          <button id="targetBtn">获取事件目标</button>
          <script>
              var targetBtn = document.getElementById("targetBtn");
              targetBtn.addEventListener("click",showtarget);
              function showtarget(event) {
                  alert(event.target);
              }
          </script>
      </div>    
      

      此时点击后，弹出  点击【确定】后，再弹出 这是一个事件冒泡。

   3. stopPropagation()：阻止事件冒泡
      面对获取事件目标代码，再增加代码

      function showtarget(event) {
          alert(event.target);
          event.stopPropagation();
      }
      

      此时再点击后，就只弹出。在button调用的函数中增加event.stopPropagation()方法，就可以阻止事件冒泡。

   4. preventDefault():阻止事件默认行为
      定义代码<a>href="www.baidu.com">baidu.com</a>，其中的链接就是a标签的默认行为，当点击 baike则会跳转到百度百科。增加preventDefault()后，则不会跳转。

      代码示例：

      <a id="aId" href="https://baike.baidu.com/">baike</a>
      <script>
          document.getElementById("aId").addEventListener("click",showA);
          function showA(event){
              event.preventDefault();
          }
      </script>