事件(二)

最新推荐文章于 2024-06-25 10:05:02 发布

thanksKlan

最新推荐文章于 2024-06-25 10:05:02 发布

阅读量87

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/hasakizzz66/article/details/108090454

版权

事件的传播

当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发

相同的事件

目标

点击在哪个元素身上了，那么这个事件的目标就是什么

冒泡

就是从事件目标的事件处理函数开始，直到window的事件处理函数触发

捕获

就是从window的事件处理函数，依次向内，只要事件目标的事件处理函数执行

也就是从上向下的执行事件处理函数

阻止冒泡

首先要有e = e || window.event

1、e.stopPropagation() 写在谁的身上就不会在往后面触发

2、e.cancelBubble = true

当嵌套的元素绑定了同类型事件触发最里层元素的事件会有一个叫做冒泡

行为 (从一个具体的元素一层一层往外)

addEventListener 第三个参数是一个布尔值指定事件的执行机制

默认值是 false 代表冒泡如果写成 true 那就是捕获(从最外层 window 一层一层往内触发 )

事件委托

把我要做的事情委托给别人来做

因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件

所以我们就可以把子元素的事件委托给父元素来做

1.事件触发

点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，那么就可以触发父元素的点击事件

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
      var oUl = docuemnt.querySelector('ul')

    oUl.addEventListener('click', function (e) {
      console.log('我是 ul 的点击事件，我被触发了')
    })
  </script>
</body>

像上面的一段代码，当我点击ul的时候肯定会触发

但是点击li的时候，也会触发

2.target

target这个属性时事件对象里面的属性，表示你的点击的目标

当你触发点击事件的时候，你点击在那个元素上，target就是哪个元素

这个target也不兼容，在ie下要使用srcElement

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
      var oUl = docuemnt.querySelector('ul')

    oUl.addEventListener('click', function (e) {
      e = e || window.event
      var target = e.target || e.srcElement
      console.log(target)
    })
  </script>
</body>

上面的代码，当你点击ul的时候，target就是ul

当你点击在li上面的时候，target就是li

3.委托

这个时候，当我们点击li的时候，也可以触发ul的点击事件

可以把li的事件委托给ul做

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
      var oUl = docuemnt.querySelector('ul')

    oUl.addEventListener('click', function (e) {
      e = e || window.event
      var target = e.target || e.srcElement

      // 判断你点击的是 li
      if (target.nodeName.toUpperCase === 'LI') {
          // 确定点击的是 li
        // 因为当你点击在 ul 上面的时候，nodeName 应该是 'UL'
        // 去做点击 li 的时候该做的事情了
        console.log('我是 li，我被点击了')
      }
    })
  </script>
</body>
//上面的代码，我们就可以把 li 要做的事情委托给 ul 来做

总结

为什么要用事件委托？

我页面上本身没li

我通过代码添加了一些li

添加进来的li是没有点击事件的

每次操作完li后要重新给li绑定一次点击事件

这样非常麻烦，这时候只要委托给ul就可以了

因为新加进来的li也是ul的子元素，点击的时候也可以触发ul的点击事件

事件委托的书写

元素的事件只能委托给结构父级或者再结构父级的同样的事件上
li 的点击事件，就不能委托给 ul 的鼠标移入事件
li 的点击事件，只能委托给 ul 或者在高父级的点击事件上

阻止默认事件

比如我给 a 标签绑定了一个点击事件，我点击你的时候希望你能告诉我你的地址是什么
而不是直接跳转链接
那么我们就要把 a 标签原先的默认事件阻止，不让他执行默认事件

两个方法来阻止默认事件

e.preventDefault()

e.returnValue=false

我们阻止默认事件的时候也要写一个兼容的写法

<a href="https://www.baidu.com">点击我试试</a>
<script>
    var oA = document.querySelector('a')

  a.addEventListener('click', function (e) {
    e = e || window.event

    console.log(this.href)

    e.preventDefault ? e.preventDefault() : e.returnValue = false
  })
</script

三大系列

client

clientX clientY

clientWidth clientHeight 元素的宽高 + padding

clientLeft clientTop 元素左边框和上边框的宽度

offset

offsetX offsetY

offsetWidth offsetHeight 元素实际宽高 (内容 + padding + border)

offsetLeft offsetTop

元素距离有定位的父元素左边和上边的距离如果父元素没有定位就一层一层往上找到有定位的父元素为止如果父元素都没有定位那就是距离窗口左边和上边的距离

offsetParent 找到有定位的父元素

page

pageX pageY

thanksKlan

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件(二)

事件的传播当元素触发一个事件的时候，其父元素也会触发相同的事件，父元素的父元素也会触发相同的事件目标点击在哪个元素身上了，那么这个事件的目标就是什么冒泡就是从事件目标的事件处理函数开始，直到window的事件处理函数触发捕获就是从window的事件处理函数，依次向内，只要事件目标的事件处理函数执行也就是从上向下的执行事件处理函数阻止冒泡首先要有e = e || window.event
复制链接

扫一扫