怎么在jQuery中实现事件绑定和解绑
更新:HHH   时间:2023-1-7


这篇文章给大家介绍怎么在jQuery中实现事件绑定和解绑,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

jquery是什么

jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。

事件的绑定和解绑

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#div1').bind('mouseover click',function (event) {//绑定事件:移动到div块上和点击
        alert($(this).html);
        $(this).unbind('mouseover');//取消鼠标移动到上面的事件
      })
    })
  </script>
  <style type="text/css">
    #div1{
      background-color: #f6b544;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div id="div1">
  </div>
</body>
</html>

绑定事件:移动到div块上和点击

解绑事件:取消鼠标移动到上面的事件

事件冒泡-阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('.son').click(function () {
        alert(1);
      });
      $('.father').bind('click',function () {
        alert(2);
      });
      $('.grandfather').bind('click',function () {
        alert(3);
      });
    })
  </script>
  <style type="text/css">
    .grandfather{
      width: 300px;
      height: 300px;
      background-color: green;
    }
    .father{
      width: 200px;
      height: 200px;
      background-color: gold;
    }
    .son{
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div class="grandfather">
    <div class="father">
      <div class="son">
      </div>
    </div>
  </div>
</body>
</html>

定义了三个div,在son点击一下弹出1,father点击一下弹出2,grandfather点击一下弹出3,如果我们点击son一下,那么会依次弹出123,点击father一下会依次弹出二三。

按照标签往上传到它的父级

事件冒泡有时候不需要,需要阻止,通过eventstopPropagation()来阻止

$('.son').click(function (event) {//event就是一个事件对象
  //用这个事件对象就能使用事件对象的方法
  alert(1);
  event.stopPropagation();//阻止事件对象冒泡
});

除了阻止事件冒泡,还要阻止一些默认行为,开发中直接return false就行。

$('.father').bind('click',function () {
  alert(2);
  //阻止事件冒泡和阻止默认行为的同意写法
  return false;
});

弹框

点击弹框外面关闭弹框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#btn').click(function () {
         // alert(2);
         $('.pop_con').fadeIn();
         // alert(1);
        return false;//阻止事件,冒泡
      });
      $(document).click(function () {
        $('.pop_con').fadeOut();
      })
    })
  </script>
</head>
<style type="text/css">
  .pop{
    position: fixed;
    width: 500px;
    height: 300px;
    background-color: #fff;
    border: 3px solid #000;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -150px;/*拉回去*/
    z-index: 2;
  }
  .mask{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.3;
    filter:alpha(opacity=30);/*兼容ie浏览器的*/
    left: 0;
    top: 0;
    z-index: 1;/*z-index设置现实层级*/
  }
  .pop_con{
    display: none;/*因为pop_con包含住了mask和pop,所以设置了这个之后,他们就隐藏了*/
  }
</style>
<body>
  <input type="button" name="" value="弹出" id="btn">
  <div class="pop_con">
    <div class="pop">
      弹框里面的文字
    </div>
    <div class="mask"></div>
  </div>
</body>
</html>

关于怎么在jQuery中实现事件绑定和解绑就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

返回web开发教程...