事件的循环绑定与委托

最新推荐文章于 2023-08-17 14:06:19 发布

哼,小呀么小胖子

最新推荐文章于 2023-08-17 14:06:19 发布

阅读量296

点赞数

分类专栏：前端面试题总结

本文链接：https://blog.csdn.net/qq_43412333/article/details/102521593

版权

前端面试题总结专栏收录该内容

45 篇文章 0 订阅

订阅专栏

例:点击日历的对应部分对其进行激活,下方内容也对应改变
下面将用只用循环绑定对其解答.此题用事件委托分别相对复杂

最终样式:
在这里插入图片描述
所用知识点:
事件处理函数中 this关键字可以当前绑定的事件源

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能
1.每个函数都是对象，都会占用内存。内存中的对象越多，性能就越差
2.必须事先指定所有事件处理程序而导致的DOM访问次数增多，会延迟整个页面的交互就绪时间

对"事件处理程序过多"问题的解决方案就是事件委托。
1.可以对未生成的DOM绑定事件
2.事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

例:

var oUl = document.querySelector('ul');
oUl.onclick = function (e) {
   //解决兼容性问题
    var ev = event || e;
    // 获取事件源
    var target = ev.target;
    // 判断事件源(通过其事件源的独有特征进行查找)
    if (target.nodeName === 'LI') { // li
      console.log(target.innerText);
    }
  }

dom属性修改:

对内容的修改表单: ele.value
非表单: ele.innerText=’ ’ (结果只为文本)
ele.innerHTML=’ ’ (结果包含标签)

属性
固有属性(元素对象的属性) ele.attribute (ele.src)
ele[attribute] (ele[attribute])

两者之间的区别:.后面只能为属性值,不能为字符串
[]内的attribute可以为变量,而.后不可以

当设置的属性为class时,应写成ele.className,但是此方法相对复杂,可直接用
classList得到class的集合,其包含3个属性
ele.classList.add();
ele.classList.remove();
ele.classList.replace(old.new)

自定义属性(人为的,手动写在标签上的属性,HTML本身不支持)
以下三种方法既可以操作固有属性,又可以操作自定义属性
ele.getAttribute(属性名)
ele.setAttribute(属性名.属性值) //本身自带新增功能
ele.removeAttribute(属性名)

循环绑定代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>简易年历</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    li {
      list-style: none;
    }

    body {
      background: #f6f9fc;
      font-family: arial;
    }

    .calendar {
      width: 210px;
      margin: 0 auto;
      padding: 10px 10px 20px 20px;
      background: #eae9e9;
    }

    .calendar ul {
      width: 210px;
      overflow: hidden;
      padding-bottom: 10px;
    }

    .calendar li {
      float: left;
      width: 58px;
      height: 54px;
      margin: 10px 10px 0 0;
      border: 1px solid #fff;
      background: #424242;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }

    .calendar li h2 {
      font-size: 20px;
      padding-top: 5px;
    }

    .calendar li p {
      font-size: 14px;
    }

    .calendar .active {
      border: 1px solid #424242;
      background: #fff;
      color: #e84a7e;
    }

    .calendar .active p {
      font-weight: bold;
    }

    .calendar .text {
      width: 178px;
      padding: 0 10px 10px;
      border: 1px solid #fff;
      padding-top: 10px;
      background: #f1f1f1;
      color: #555;
    }

    .calendar .text h2 {
      font-size: 14px;
      margin-bottom: 10px;
    }

    .calendar .text p {
      font-size: 12px;
      line-height: 18px;
    }
  </style>
</head>

<body>
  <div id="tab" class="calendar">
    <ul id="box">
      <li class="active">
        <h2>1</h2>
        <p>JAN</p>
      </li>
      <li>
        <h2>2</h2>
        <p>FER</p>
      </li>
      <li>
        <h2>3</h2>
        <p>MAR</p>
      </li>
      <li>
        <h2>4</h2>
        <p>APR</p>
      </li>
      <li>
        <h2>5</h2>
        <p>MAY</p>
      </li>
      <li>
        <h2>6</h2>
        <p>JUN</p>
      </li>
      <li>
        <h2>7</h2>
        <p>JUL</p>
      </li>
      <li>
        <h2>8</h2>
        <p>AUG</p>
      </li>
      <li>
        <h2>9</h2>
        <p>SEP</p>
      </li>
      <li>
        <h2>10</h2>
        <p>OCT</p>
      </li>
      <li>
        <h2>11</h2>
        <p>NOV</p>
      </li>
      <li>
        <h2>12</h2>
        <p>DEC</p>
      </li>
    </ul>

    <div class="text" id="txt">
      <h2>1月活动</h2>
      <p>快过年了，大家可以商量着去哪玩吧～</p>
    </div>

  </div>
</body>
<script>
  var arr = [
    '快过年了，大家可以商量着去哪玩吧～',
    '大家好好学习吧222222~~~',
    '大家好好学习吧3333333~~~',
    '大家好好学习吧444444~~~',
    '大家好好学习55555555~~~',
    '大家好好学习吧666222222~~~',
    '大家好好学习吧227772222~~~',
    '大家好好学习吧28888822222~~~',
    '大家好好学习吧99999222222~~~',
    '大家好好学习10000000吧222222~~~',
    '大家好好学习吧111111222222~~~',
    '大家好好学习吧22222200000000000~~~'
  ]

  var oLis = document.querySelectorAll('#box li');
  var oH2 = document.querySelector('#txt h2');
  var oP = document.querySelector('#txt p');
  for (var i = 0; i < oLis.length; i++) {
    //将每个li赋予对应的下标属性
    oLis[i].index = i;
    //当发生点击事件时
    oLis[i].onclick = function () {
      // 发生点击时先清除所有激活状态,可以使其只有一个激活状态
      for (var i = 0; i < oLis.length; i++) {
        oLis[i].classList.remove('active');
      }
      // 通过this关键字找到当前点击事件,赋予对应的class名,使用其对应的样式,激活当前项
      this.classList.add('active');
      //在下面的内容框中赋予对应的内容
      oH2.innerHTML = this.index + 1 + '月活动';
      oP.innerHTML = arr[this.index];
    }
  }

哼,小呀么小胖子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件的循环绑定与委托

例:点击日历的对应部分对其进行激活,下方内容也对应改变下面将用只用循环绑定对其解答.此题用事件委托分别相对复杂最终样式:所用知识点:事件处理函数中 this关键字可以当前绑定的事件源在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能1.每个函数都是对象，都会占用内存。内存中的对象越多，性能就越差2.必须事先指定所有事件处理程序而导致的DOM访...
复制链接

扫一扫

专栏目录