点击事件：onclick、addEventListener、attachEvent及解绑事件

- 日理万妓 2023-08-17 16:30 188阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
    
        </style>
    </head>
    <body>
    <div>点击我</div>
    </body>
    <script>
        const div = document.getElementsByTagName('div')[0];
        /*
        兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序；
        基本等同于写在HTML行间上；
         */
        div.onclick = () => {
            console.log('a');
        };
        /*
        obj.addEventListener(type,fn,false):
            IE9以下不兼容，可以为一个事件绑定多个处理程序
         */
        div.addEventListener('click', () => {
            console.log('a');
        }, false);
    
        /*
        obj.attachEvent('on'+ type,fn)
            IE独有(IE11没有，IE10、9、8、7、5有)，一个事件同样可以绑定多个处理程序；
            温馨提示：执行下面代码时请把上面的代码注释掉，只保留 const div = document.getElementsByTagName('div')[0];
         */
        div.attachEvent('onclick', function () {
            console.log('b');
        })
    </script>
    </html>

### onclick解绑事件： ###

### addEventListener解绑事件: ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
    
      </style>
    </head>
    
    <body>
      <div>点击我</div>
    </body>
    <script>
      const div = document.getElementsByTagName('div')[0];
      /*
      obj.addEventListener(type,fn,false):
          IE9以下不兼容，可以为一个事件绑定多个处理程序
       */
      function fun() {
        console.log('a');
        div.removeEventListener('click', fun, false);//解绑事件
      };
      div.addEventListener('click', fun, false);
    </script>
    
    </html>

### attachEvent解绑事件: ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
    
      </style>
    </head>
    
    <body>
      <div>点击我</div>
    </body>
    <script>
      var div = document.getElementsByTagName('div')[0];
      function fun() {
        console.log("a");
        div.detachEvent("onclick", fun);//IE解绑事件
      };
      div.attachEvent("onclick", fun);
    </script>
    
    </html>