怎么在jQuery中实现事件绑定和解绑

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

为善右等地区用户提供了全套网页设计制作服务，及善右网站建设行业解决方案。主营业务为网站制作、成都网站设计、善右网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

jquery是什么

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

事件的绑定和解绑




  
  Title
  
  
    $(function () {
      $('#div1').bind('mouseover click',function (event) {//绑定事件:移动到div块上和点击
        alert($(this).html);
        $(this).unbind('mouseover');//取消鼠标移动到上面的事件
      })
    })
  
  
    #div1{
      background-color: #f6b544;
      width: 100px;
      height: 100px;
    }

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

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

事件冒泡-阻止事件冒泡




  
  Title
  
  
    $(function () {
      $('.son').click(function () {
        alert(1);
      });
      $('.father').bind('click',function () {
        alert(2);
      });
      $('.grandfather').bind('click',function () {
        alert(3);
      });
    })
  
  
    .grandfather{
      width: 300px;
      height: 300px;
      background-color: green;
    }
    .father{
      width: 200px;
      height: 200px;
      background-color: gold;
    }
    .son{
      width: 100px;
      height: 100px;
      background-color: red;
    }

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

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

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

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

Title $(function () { $('#btn').click(function () { // alert(2); $('.pop_con').fadeIn(); // alert(1); return false;//阻止事件，冒泡 }); $(document).click(function () { $('.pop_con').fadeOut(); }) }) .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，所以设置了这个之后，他们就隐藏了*/ } 弹框里面的文字

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

重庆分公司，新征程启航

怎么在jQuery中实现事件绑定和解绑

jquery是什么

其他资讯