Web APIs DOM-事件高级

很菜的前端学习者
111 阅读1分钟

事件对象

image.png 获取事件对象

1.在事件绑定的回调函数参数的第一个参数就是事件对象，一般命名为event,ev,e

元素.addEventListener('click',function(e){
  //参数e就是事件对象     
})

 <body>
    <button>点击</button>
    <input type="text" />
    <script>
      let btn = document.querySelector('button')
      let input = document.querySelector('input')
      // 事件处理机制监听到用户操作之后，调用这个回调函数进行处理，同时给这个回调函数传入一个参数，这个参数就是事件对象
      btn.addEventListener('click', function(e) {
        console.log(e)
      })
      input.addEventListener('keydown', function(e) {
        console.log(e)

        // 按下确认键的时候，才进行处理
        if (e.which == 13) {
          console.log('登陆')
        }
      })
    </script>
  </body>

事件对象常用属性

image.png

<head>
 <style>
      body {
        height: 3000px;
      }

      div {
        width: 300px;
        height: 300px;
        background-color: pink;
        margin: 100px;
      }
    </style>
</head>
 <body>
    <div>123</div>
    <script>
      let div = document.querySelector('div')
      div.addEventListener('click', function(e) {
        console.log(e)
      })
    </script>
  </body>

## //跟随鼠标的小图片
<head>
 <style>
      html,
      body {
        width: 100%;
        height: 100%;
        background-color: #ff0;
      }
      img {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
</head>
<body>
    <img src="./images/tianshi.gif" alt="" />
//图片随便找的
    <script>
      let img = document.querySelector('img')

      // 鼠标跟随：得监听到鼠标的移动：mousemove,绑定为文档 / body
      document.addEventListener('mousemove', function(e) {
        // document.body.addEventListener('mousemove', function() {
        console.log(e.clientX, e.clientY)

        img.style.left = e.clientX - img.offsetWidth / 2 + 'px'
        img.style.top = e.clientY - img.offsetHeight / 2 + 'px'
      })
    </script>
  </body>

//发布留言信息
 <head>
  <style>
      * {
        margin: 0;
        padding: 0;
      }

      ul {
        list-style: none;
      }

      .w {
        width: 900px;
        margin: 0 auto;
      }

      .controls textarea {
        width: 878px;
        height: 100px;
        resize: none;
        border-radius: 10px;
        outline: none;
        padding-left: 20px;
        padding-top: 10px;
        font-size: 18px;
      }

      .controls {
        overflow: hidden;
      }

      .controls div {
        float: right;
      }

      .controls div span {
        color: #666;
      }

      .controls div .useCount {
        color: red;
      }

      .controls div button {
        width: 100px;
        outline: none;
        border: none;
        background: rgb(0, 132, 255);
        height: 30px;
        cursor: pointer;
        color: #fff;
        font: bold 14px '宋体';
        transition: all 0.5s;
      }

      .controls div button:hover {
        background: rgb(0, 225, 255);
      }

      .controls div button:disabled {
        background: rgba(0, 225, 255, 0.5);
      }

      .contentList {
        margin-top: 50px;
      }

      .contentList li {
        padding: 20px 0;
        border-bottom: 1px dashed #ccc;
        position: relative;
      }

      .contentList li .info {
        position: relative;
      }

      .contentList li .info span {
        position: absolute;
        top: 15px;
        left: 100px;
        font: bold 16px '宋体';
      }

      .contentList li .info p {
        position: absolute;
        top: 40px;
        left: 100px;
        color: #aaa;
        font-size: 12px;
      }

      .contentList img {
        width: 80px;
        border-radius: 50%;
      }

      .contentList li .content {
        padding-left: 100px;
        color: #666;
        word-break: break-all;
      }

      .contentList li .the_del {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 28px;
        cursor: pointer;
      }
    </style>
 </head>
  <body>
    <div class="w">
      <!-- 操作的界面 -->
      <div class="controls">
        <img src="./images/9.6/tip.png" alt="" /><br />
        <!-- maxlength 可以用来限制表单输入的内容长度 -->
        <textarea
          placeholder="说点什么吧..."
          id="area"
          cols="30"
          rows="10"
          maxlength="200"
        ></textarea>
        <div>
          <span class="useCount" id="useCount">0</span>
          <span>/</span>
          <span>200</span>
          <button id="send">发布</button>
        </div>
      </div>
      <!-- 微博内容列表 -->
      <div class="contentList">
        <ul id="list">
          <!-- <li>
            <div class="info">
              <img class="userpic" src="./images/9.5/01.jpg" />
              <span class="username">名字</span>
              <p class="send-time">发布于 时间</p>
            </div>
            <div class="content">内容</div>
            <span class="the_del">X</span>
          </li> -->
        </ul>
      </div>
    </div>

    <script>
      // 模拟数据，后期我们需要从这个数组中随机获取一个数据对象，做为发布微博的用户信息进行渲染，但是这个不是关键业务，也可以固定写死(图片自由定的)
      let dataArr = [
        { uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
        { uname: '女娲', imgSrc: './images/9.5/02.jpg' },
        { uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
        { uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
        { uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
        { uname: '张良', imgSrc: './images/9.5/06.jpg' },
        { uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
        { uname: '李白', imgSrc: './images/9.5/08.jpg' },
        { uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
        { uname: '墨子', imgSrc: './images/9.5/10.jpg' },
        { uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
        { uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
        { uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
        { uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
        { uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
        { uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
        { uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
        { uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
        { uname: '露娜', imgSrc: './images/9.5/19.jpg' },
        { uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
        { uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
        { uname: '百里玄策', imgSrc: './images/9.5/22.jpg' }
      ]

      // 1.获取元素
      let send = document.querySelector('#send') // 发布按钮
      let area = document.querySelector('#area') // 文本域
      let useCount = document.querySelector('#useCount') // 数字展示
      let list = document.querySelector('#list') // 列表结构

      area.focus()

      // 2.实现微博的基本发布
      send.addEventListener('click', function() {
        // 2.1 收集用户输入的内容
        let content = area.value.trim()
        // 添加用户输入内容的判断
        if (content.length == 0) {
          alert('不要乱搞嘛')
          return
        }
        // 2.2 创建一个li元素
        let li = document.createElement('li')

        // 2.3 随机获取一个用户信息，做为渲染的数据来源
        let index = parseInt(Math.random() * dataArr.length)

        // 2.4 根据用户的输入生成li元素的内容
        li.innerHTML = `<div class="info">
                          <img class="userpic" src="${dataArr[index].imgSrc}" />
                          <span class="username">${dataArr[index].uname}</span>
                          <p class="send-time">发布于 ${dateFormat()}</p>
                        </div>
                        <div class="content">${content}</div>
                        <span class="the_del">X</span>`
        // 2.5 将创建的li元素插入到指定的容器中
        list.insertBefore(li, list.children[0])

        // 为删除按钮绑定事件
        let the_del = document.querySelector('.the_del')
        the_del.addEventListener('click', function() {
          // the_del.parentNode.remove()
          // list.removeChild(li)
          list.removeChild(the_del.parentNode)
        })

        // 发布之后，清空输入框
        area.value = ''
      })

      // 3.添加输入框内容变化的监听
      area.addEventListener('input', function() {
        // area.value = area.value.trim()
        useCount.innerText = area.value.trim().length
      })
      // 封装一个函数，用于日期格式化
      let dateFormat = function() {
        let date = new Date()
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let hour = date.getHours()
        let minute = date.getMinutes()
        let second = date.getSeconds()

        return `${year}-${month}-${day} ${hour}:${minute}:${second}`
      }
    </script>
  </body>

image.png

image.png 事件冒泡,当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为冒泡。

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件，事件冒泡时默认存在的 事件捕获：从DOM的根元素开始去执行对象的事件（从外到里）

//事件冒泡
<head>
 <style>
      html,
      body {
        width: 100%;
        height: 100%;
      }
      .father {
        margin: 100px auto;
        width: 500px;
        height: 500px;
        background-color: pink;
      }

      .son {
        width: 200px;
        height: 200px;
        background-color: purple;
      }
    </style>
</head>
 <body>
    <div class="father">
      <div class="son"></div>
    </div>

    <script>
      let father = document.querySelector('.father')
      let son = document.querySelector('.son')

      document.body.addEventListener(
        'click',
        function() {
          console.log('body')
        },
        true
      )
      son.addEventListener(
        'click',
        function(e) {
          // e.stopPropagation():阻止事件冒泡
          e.stopPropagation()
          console.log('son')
        },
        true // 捕获阶段来触发事件
      )

      father.addEventListener(
        'click',
        function() {
          console.log('father')
        },
        true
      )
    </script>
  </body>

//事件捕获需要写对应代码才能看到效果
DOM.addEventListener(事件类型,事件出来函数,是否使用捕获机制)
/*
说明：addEventListener第三个参数传入true代表时捕获阶段触发
若传入false代表冒泡节点触发，默认就是false
若是用LO事件监听，则只有冒泡阶段，没有捕获
*/

阻止事件流动

因为默认就有冒泡模式的存在。所有容易导致事件影响到父元素，如果想把父元素就限制在当前元素内，就需要阻止🚫事件流动.阻止事件流动就需要拿到事件对象

//语法
事件对象.stopPropagation()
//此方法可以阻断事件流动传播，不管在冒泡节点有效，捕获阶段也有效
avatar
文章
阅读
粉丝