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

最新推荐文章于 2024-04-05 06:42:51 发布

&XYZ&

最新推荐文章于 2024-04-05 06:42:51 发布

阅读量393

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/101644433

版权

JavaScript 专栏收录该内容

73 篇文章 2 订阅

订阅专栏

<!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解绑事件：

<!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');
    div.onclick = null;//解绑事件
  };
</script>

</html>

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>

&XYZ&

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击事件：onclick、addEventListener、attachEvent及解绑事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> </style></head><body><di...
复制链接

扫一扫

专栏目录