事件的绑定与移除

事件的绑定

在jQuery中,可以使用bind()方法来对元素进行特定事件的绑定,该方法接受三个参数:第一个参数是事件类型:blur、focus、click等,也可以是自定义名称;第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象;第三个参数则是用来绑定的处理函数。

<button id="btn">点击我</button>
<script type="text/javascript">
    $(function(){
       $(‘#btn‘).bind("click",function(){
             $(‘body‘).append("<p>我的绑定函数</p>");
       })
    })
</script>

但是,在事件操作过程中,我们经常采用简写的方式为元素绑定事件。

<button id="btn">点击我</button>

<script type="text/javascript">

  $(function(){

    $(‘#btn‘).click(function(){

      $(‘body‘).append("<p>我的绑定函数</p>");

    })

  })

</script>

有的时候,我们还可以根据需要,为同一个元素绑定多个事件。

<button id="btn">点击我</button>
<script type="text/javascript">
    $(function(){
       $(‘#btn‘).bind("click", function(){
                     $(‘body‘).append("<p>我的绑定函数1</p>");
              }).bind("click", function(){
                     $(‘body‘).append("<p>我的绑定函数2</p>");
              }).bind("click", function(){
                       $(‘body‘).append("<p>我的绑定函数3</p>");
              });
    })
</script>

当我们点击按钮的时候,会依次触发绑定的三个事件:

事件移除

在jQuery中,使用unbind()方法进行事件的移除,该方法接收两个参数:事件类型和要移除的函数。

  • 如果没有传入参数,则删除所有绑定的事件
  • 如果提供了事件类型作为参数,则只删除该类型的绑定事件
  • 如果把在绑定时传递额处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除

我们将上面绑定多个事件的代码进行修改

<button id="btn">点击我</button>
<div id="test"></div>
<button id="del">删除事件</button>
<script type="text/javascript">
    $(function(){
       $(‘#btn‘).bind("click", myFun1 = function(){
                     $(‘#test‘).append("<p>我的绑定函数1</p>");
              }).bind("click", myFun2 = function(){
                     $(‘#test‘).append("<p>我的绑定函数2</p>");
              }).bind("click", myFun3 = function(){
                       $(‘#test‘).append("<p>我的绑定函数3</p>");
              });
    })
</script>

当unbind()没有传入参数时:

$(‘#del‘).click(function(){
      $(‘#btn‘).unbind();
});

此时表示移除所有的绑定事件,当先点击删除事件按钮再点击上面的按钮时,页面不会有任何变化,因为所有的事件均被移除。

当unbind()只有一个参数的时候:

$(‘#del‘).click(function(){
     $(‘#btn‘).unbind("click");
});

此时表示只移除匹配元素的单击事件,因为上面绑定的多个事件均为单击事件,所以看到的效果和上面的是一样的。

当unbind()接收两个参数时:

$(‘#del‘).click(function(){
      $(‘#btn‘).unbind("click",myFun2);
});

此时表示只移除事件处理函数名为“myFun2”的单击事件,当先点击删除事件,在点击上面的按钮时,会出现下面的变化:

one()

有时候,我们为某些元素绑定事件时,只希望这些事件执行一次就立即被移除,针对这种情况,jQuery提供了一种简写的方法:one()方法,该方法可以为元素绑定处理函数,当处理函数触发一次后,立即被删除。该方法的结构和使用语法同bind()方法一样,这里就不再赘述了。

为了演示该方法,我们依旧将上面的例子进行改造:

<button id="btn">点击我</button>
<div id="test"></div>
<script type="text/javascript">
    $(function(){
       $(‘#btn‘).one("click", function(){
                     $(‘#test‘).append("<p>我的绑定函数1</p>");
              }).one("click", function(){
                     $(‘#test‘).append("<p>我的绑定函数2</p>");
              }).bind("click", function(){
                       $(‘#test‘).append("<p>我的绑定函数3</p>");
              });
    })
</script>

上面,我们为元素绑定了三个单击事件,其中有两个是只执行一次就会被立即移除的,所以,当我们第一次点击按钮时,三个事件都会触发,随后,前面两个事件就会被移除,第二次再点击按钮时,就只触发最后一个事件了。

原文地址:https://www.cnblogs.com/yuyujuan/p/9451907.html

时间: 2024-10-13 23:45:28

事件的绑定与移除的相关文章

原生js跨浏览事件绑定(移除)/javascript事件绑定(移除)

网上找了半天没看到,都是基于ie attachEvent(有诸多的问题存在)来写的,所以手动写了个js模拟绑定事件希望能帮到需要的童鞋 addEvent = function(obj,type,fn){  if(obj.addEventListener) {//W3C   obj.addEventListener(type,fn,false);  }else if (obj.attachEvent) {//ie(期待它的灭亡)   if(!obj.events) obj.events = {};

jquery事件与绑定事件

1.首先,我们来看一下经常使用的添加事件的方式: <input type="button" id="btn" value="click me!" onclick="shao();" /> <script type="text/javascript"> function shao() { alert("msg is showing!"); } </script

jquery事件重复绑定解决办法

jquery事件重复绑定解决办法 一$.fn.live 重复绑定 解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件. //先通过die()方法解除,再通过live()绑定$(“#selectAll”).die().live(“click”,function(){//事件运行代码}); 二click等事件 解决:使用unbind("click")方法先解除绑定的事件再绑定新事件,即在给对象绑定事件之前先移除该

jquery事件重复绑定的快速解决方法

click等事件 解决:使用unbind("click")方法先解除绑定的事件再绑定新事件,即在给对象绑定事件之前先移除该对象上的原有事件 1 $("#test2").unbind('click').click(function() { 2 alert("click解除绑定执行" + k++ + "次"); 3 }); 转自:http://www.cnblogs.com/shiyou00/p/5531049.html

jQuery学习-事件之绑定事件(一)

我们都知道jQuery的事件其思想来源于Dean Edwards的addEvent,通过源码我们知道jQuery在为元素绑定事件时,每种类型的事件(click,blur)时只绑定了一次对应类型的事件处理方法,实际的方法是存在jQuery的缓存系统中的,这样做的好处我就不多说了,绑定方法的函数为add方法,在执行事件的时,通过handers在缓存系统中获取事件列表,然后通过dispatch函数来执行对应的事件. jQuery.event = { add: function( elem, types

jQuery学习-事件之绑定事件(三)

在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event, handlers ) {         var sel, handleObj, matches, i,             handlerQueue = [],             delegateCount = handlers.delegateCount,             cur =

WPF 在事件中绑定命令(可以在模版中绑定命令)

其实这也不属于MVVMLight系列中的东东了,没兴趣的朋友可以跳过这篇文章,本文主要介绍如何在WPF中实现将命令绑定到事件中. 上一篇中我们介绍了MVVMLight中的命令的用法,那么仅仅知道命令是如何构建使用的还不够,很多情况下我们都需要在某个事件触发的时候才去触发命令,所以将命令绑定到事件上是非常有效的做法,下面我们来接着实现将命令绑定到事件中. WPF实现命令绑定到事件 使用 System.Windows.Interactivity.dll 中的 Interaction 可以帮助我们实现

父节点和子节点事件重复绑定(如click)

以click事件为例,当父节点或子节点绑定了click事件后,点击该节点,事件会发生冒泡传递,即会造成事件重复绑定,这时候需要阻止事件的冒泡,采用stopPropagation 或cancelBubble等. stopPropagation() 方法 定义和用法 不再派发事件. 终止事件在传播过程的捕获.目标处理或起泡阶段进一步传播.调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点. 语法 event.stopPropagation() 说明 该方法将停止事件的传播,

在MVVM模式中,按钮Click事件的绑定方法

原文:在MVVM模式中,按钮Click事件的绑定方法 在MVVM模式中,我们将Button的方法写到ViewModel中,然后绑定到前端界面.通常的做法是写一个类,继承ICommand接口,然而如果按钮比较多的话,就需要写很多的类,对于后期维护造成很大的不变,微软提供了一个DelegateCommand类,可以简化开发. 使用方法如下: 首先生命ViewModel属性,GetMsg函数, public DelegateCommand GetMsg { get { return new Deleg