18_事件绑定与解绑

J-April

于 2021-06-22 20:22:12 发布

阅读量123

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_47016497/article/details/118115933

版权

jQuery 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用jQuery进行事件绑定与解绑，包括click、mouseenter/leave等，展示了多种绑定方式，并演示了事件坐标获取、阻止冒泡和默认行为。还涵盖了如何根据需求动态解绑特定事件。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>18_事件绑定与解绑</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }

  .out {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 10px;
    background: blue;
  }

  .inner {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50px;
    background: red;
  }

  .divBtn {
    position: absolute;
    top: 250px;
  }

</style>

<body style="height: 2000px;">

<div class="out">
  外部DIV
  <div class="inner">内部div</div>
</div>

<div class='divBtn'>
  <button id="btn1">取消绑定所有事件</button>
  <button id="btn2">取消绑定mouseover事件</button>
  <button id="btn3">测试事件坐标</button>
  <a href="http://www.baidu.com" id="test4">百度一下</a>
</div>

<!--
1. 事件绑定(2种)：
  * eventName(function(){})
    绑定对应事件名的监听,	例如：$('#div').click(function(){});
  * on(eventName, funcion(){})
    通用的绑定事件监听, 例如：$('#div').on('click', function(){})
  * 优缺点:
    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
    on: 编码不方便, 可以添加多个监听, 且更通用
2. 事件解绑：
  * off(eventName)
3. 事件的坐标
  * event.clientX, event.clientY  相对于视口的左上角
  * event.pageX, event.pageY  相对于页面的左上角
  * event.offsetX, event.offsetY 相对于事件元素左上角
4. 事件相关处理
  * 停止事件冒泡 : event.stopPropagation()
  * 阻止事件默认行为 : event.preventDefault()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  /*
   需求：
   1. 给.out绑定点击监听(用两种方法绑定)
   2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
   3. 点击btn1解除.inner上的所有事件监听
   4. 点击btn2解除.inner上的mouseover事件
   5. 点击btn3得到事件坐标
   6. 点击.inner区域, 外部点击监听不响应
   7. 点击链接, 如果当前时间是偶数不跳转
   */
  //1. 给.out绑定点击监听(用两种方法绑定)
  /*$('.out').click(function () {
   console.log('click out')
   })*/
  $('.out').on('click', function () {
    console.log('on click out')
  })

  //2. 给.inner绑定鼠标移入和移出的事件监听(用3种方法绑定)
  /*
   $('.inner')
   .mouseenter(function () { // 进入
    console.log('进入')
   })
   .mouseleave(function () { // 离开
   console.log('离开')
   })
   */
  /*
   $('.inner')
   .on('mouseenter', function () {
   console.log('进入2')
   })
   .on('mouseleave', function () {
   console.log('离开2')
   })
   */
  $('.inner').hover(function () {
    console.log('进入3')
  }, function () {
    console.log('离开3')
  })


  //3. 点击btn1解除.inner上的所有事件监听
  $('#btn1').click(function () {
    $('.inner').off()
  })

  //4. 点击btn2解除.inner上的mouseenter事件
  $('#btn2').click(function () {
    $('.inner').off('mouseenter')
  })

  //5. 点击btn3得到事件坐标
  $('#btn3').click(function (event) { // event事件对象
    console.log(event.offsetX, event.offsetY) // 原点为事件元素的左上角
    console.log(event.clientX, event.clientY) // 原点为窗口的左上角
    console.log(event.pageX, event.pageY) // 原点为页面的左上角
  })

  //6. 点击.inner区域, 外部点击监听不响应
  $('.inner').click(function (event) {
    console.log('click inner')
    //停止事件冒泡
    event.stopPropagation()
  })
  
  //7. 点击链接, 如果当前时间是偶数不跳转
  $('#test4').click(function (event) {
    if(Date.now()%2===0) {
      event.preventDefault()
    }
  })
</script>
</body>
</html>