jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應用示例

更新時間：2019年05月13日 09:08:21 作者：SpecYue

這篇文章主要介紹了jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應用,結合實例形式較為詳細的分析了jQuery事件綁定、解綁、事件冒泡、阻止冒泡等相關原理與應用技巧,需要的朋友可以參考下

本文實例講述了jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應用。分享給大家供大家參考，具體如下：

事件的綁定和解綁

<!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();//阻止事件對象冒泡
});

除了阻止事件冒泡，還要阻止一些默認行為，開發(fā)中直接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設置現(xiàn)實層級*/
  }
  .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>

如果不組織事件冒泡的話，點擊之后，彈框出現(xiàn)之后，就會直接隱藏，只有阻止之后，才能點擊外框的document或者mask才能隱藏彈框。

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jQuery常見事件用法與技巧總結》、《jQuery常用插件及用法總結》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴展技巧總結》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章: