事件(二)

事件的传播

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

​ 相同的事件

目标

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

冒泡

​ 就是从事件目标的事件处理函数开始, 直到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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值