快捷導(dǎo)航

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

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

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

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

事件的綁定和解綁

<!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) {//綁定事件:移動(dòng)到div塊上和點(diǎn)擊
        alert($(this).html);
        $(this).unbind('mouseover');//取消鼠標(biāo)移動(dòng)到上面的事件
      })
    })
  </script>
  <style type="text/css">
    #div1{
      background-color: #f6b544;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
<body>
  <div id="div1">
  </div>
</body>
</html>

綁定事件:移動(dòng)到div塊上和點(diǎn)擊

解綁事件：取消鼠標(biāo)移動(dòng)到上面的事件

事件冒泡-阻止事件冒泡

<!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>

定義了三個(gè)div，在son點(diǎn)擊一下彈出1，father點(diǎn)擊一下彈出2，grandfather點(diǎn)擊一下彈出3，如果我們點(diǎn)擊son一下，那么會(huì)依次彈出123，點(diǎn)擊father一下會(huì)依次彈出二三。

按照標(biāo)簽往上傳到它的父級(jí)

事件冒泡有時(shí)候不需要，需要阻止，通過(guò)eventstopPropagation()來(lái)阻止

$('.son').click(function (event) {//event就是一個(gè)事件對(duì)象
  //用這個(gè)事件對(duì)象就能使用事件對(duì)象的方法
  alert(1);
  event.stopPropagation();//阻止事件對(duì)象冒泡
});

除了阻止事件冒泡，還要阻止一些默認(rèn)行為，開(kāi)發(fā)中直接return false就行。

$('.father').bind('click',function () {
  alert(2);
  //阻止事件冒泡和阻止默認(rèn)行為的同意寫(xiě)法
  return false;
});

彈框

點(diǎn)擊彈框外面關(guān)閉彈框

<!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設(shè)置現(xiàn)實(shí)層級(jí)*/
  }
  .pop_con{
    display: none;/*因?yàn)閜op_con包含住了mask和pop，所以設(shè)置了這個(gè)之后，他們就隱藏了*/
  }
</style>
<body>
  <input type="button" name="" value="彈出" id="btn">
  <div class="pop_con">
    <div class="pop">
      彈框里面的文字
    </div>
    <div class="mask"></div>
  </div>
</body>
</html>

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

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

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: