js事件处理 —

对于JS事件处理分为四部分：

1.html事件处理程序

直接添加到HTML结构中

解析：用html处理程序可以直接在button元素里直接调用，但是维护性不是很方便

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

       <p id="pid">js事件处理程序</p>

       <button id="btn" onclick="demo()">点击</button>

       <script>

           function demo(){

               document.getElementById("pid").innerHTML ="html事件处理程序"

           }

       </script>

 </body>

 </html>

2.DOM 0级处理事件

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

解析：

1.调用ID属性获得事件元素，然后把事件处理程序赋值给——元素点式事件来调用

2.当再次用同样的事件的话，前面调用的处理程序将会被覆盖

3.利用元素.事件 = null ，可以清除事件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

       <button id="btn">点击</button>

       <script>

           var btn = document.getElementById("btn") //调用ID属性获得button元素

           btn.onclick =function(){        //点击事件1

               alert("DOM 0级处理事件1")

           }

           btn.onclick = function(){        //点击事件2

               alert("DOM 0级处理事件2")

           }

           btn.onclick = null           //清除事件

       </script>

 </body>

 </html>

DOM2级事件处理程序

DOM2级事件处理程序

解析：

DOM2级一个元素用相同的两个事件调用不同方法时不会被覆盖

addEvenListener("事件"，“事件处理方法”)

e.target.type//获取事件目标的事件类型，返回值事件类型

e.target.stopPropagation();//阻止事件的冒泡方法

e.preventDefault()//清除元素的默认方法

elem.removeEvenlistener("事件","事件处理方法") //清除事件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         #div1{

             width:100px;

             height:100px;

             border: 1px solid gray;

         }

         #div2{

             width: 50px;

             height:50px;

             border:1px solid gray;

         }

     </style>

 </head>

 <body>

      <div id="div1">

          <div id="div2">DOM2级处理事件</div>

      </div>

      <a  id="aid" href="www.baidu.com">连接百度</a>

       <script>

           var div1 = document.getElementById('div1')

           var div2 = document.getElementById("div2")

           var a =document.getElementById("aid")

           div1.addEventListener("click",div1Style)

           div2.addEventListener("click",div2Style)

           div2.addEventListener("click",div3Style)

           a.addEventListener("click",aStyle)

           function div1Style() {

               this.style.background = "blue"

           }

           function div2Style(e) {

               alert(e.type)  //获取无素的事件类型

               alert(e.target.id)  //获取事件目标（元素）的ID

               e.stopPropagation()  //阻止父元素的事件冒泡

               this.style.background = "black"

           }

          function div3Style(){

               this.style.color = "red"

           }

           function aStyle(e){

               e.preventDefault()//清除元素的默认方法

           }

           div2.removeEventListener("click",div3Style)//清除事件

       </script>

 </body>

 </html>

4.针对IE8和IE8以下的游览器 attchEvent detachEvent

当IE游览是IE8或者低于IE8时使用attchEvent2级的DOM处理事件

detachEvent来清除处理事件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

      <button id="btn">点击</button>

      <script>

          var btn = document.getElementById("btn")

          if(btn.addEventListener){

              btn.addEventListener("click",demo)

          }else if(btn.attachEvent){    //针对IE8 和 IE8以下的游览

              btn.attachEvent("onclick",demo)

          }else{                      //针对更老版本的游览器

              btn.onclick = demo()

          }

          function demo(){

              alert("hello")

          }

          btn.detachEvent("onclick",demo)  //针对IE8 和 IE8以下的游览 清除事件

      </script>

 </body>

 </html>

巴特西

js事件处理 —— 详解

最新文章

热门文章