点击事件绑定累加

最新推荐文章于 2021-09-09 15:52:25 发布

weixin_44204580

最新推荐文章于 2021-09-09 15:52:25 发布

阅读量350

点赞数

文章标签：以面向对象的格式写点击事件要在init中初始注册

本文链接：https://blog.csdn.net/weixin_44204580/article/details/85230844

版权

点击事件绑定累加

当我们使用构造函数的实例对象来注册页面的点击事件，需要在init初始函数中或者构造函数中调用，如果是在实例对象的点击事件方法中调用，会出现点击事件累加的效果，即是：点击一次，触发多次

比如：

下面的有两个页面，初始显示第一个粉色页面，点击粉色页面的按钮显示第二个黄绿色页面，再次点击第二个页面的按钮显示，第一个页面，这样的页面效果中有两次点击事件，如果我们将他们注册到实例对象中，需要在init中统一调用，如果我们在页面1的点击事件中调用了页面2的点击事件，就会出现点击事件绑定累加

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    div {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
    }
    #div0 {
      background-color: deeppink;
    }
    #div1 {
      background-color: yellowgreen;
    }
  </style>
</head>
<body>
<div id="div0">
  <button id="btn0">按钮0</button>
</div>
<div id="div1">
  <button id="btn1">按钮1</button>
</div>
<script>
  const div0 = document.getElementById('div0')
  const div1 = document.getElementById('div1')
  const btn0 = document.getElementById('btn0')
  const btn1 = document.getElementById('btn1')
  function Demo() {
    this.init()
  }
  Demo.prototype = {
    div0: function () {
      btn0.addEventListener('click', () => {
        div0.style.display = 'none'
        div1.style.display = 'block'
        console.log('div0')
        //  如果在第一个页面中调用第二个页面的点击事件 这里就会出现绑定累加效果 ，所以这里调用时不恰当的
       //  this.div1()
      })
    },
    div1: function () {
      btn1.addEventListener('click', () => {
        div1.style.display = 'none'
        div0.style.display = 'block'
        console.log('div1')
      })
    },
    init: function () {
      div0.style.display = 'block';
      // 在初始函数中统一调用
      this.div0()
      this.div1()
    }
  }
  const demo = new Demo()
</script>
</body>
</html>

亲测如此~

weixin_44204580

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击事件绑定累加

点击事件绑定累加当我们使用构造函数的实例对象来注册页面的点击事件，需要在init初始函数中或者构造函数中调用，如果是在实例对象的点击事件方法中调用，会出现点击事件累加的效果，即是：点击一次，触发多次比如：下面的有两个页面，初始显示第一个粉色页面，点击粉色页面的按钮显示第二个黄绿色页面，再次点击第二个页面的按钮显示，第一个页面，这样的页面效果中有两次点击事件，如果我们将他们注册到实例对象中，需...
复制链接

扫一扫