美文网首页
事件的取消与添加

事件的取消与添加

作者: 北街九条狗 | 来源:发表于2019-09-17 13:51 被阅读0次

.bind ( ) 添加事件

$(selector).bind(event,data,function);
参数 描述
event 必需。规定添加到元素的一个或多个事件。

由空格分隔多个事件。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind("click",function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>
</html>
$(selector).bind({event:function, event:function, ...});
参数 描述
{event:function, event:function, ...} 必需。规定事件映射,其中包含一个或多个添加到元素的事件,以及当事件发生时运行的函数。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>
</html>

.unbind( ) 取消事件事件

$(selector).unbind(event,function);
参数 描述
event 可选。规定删除元素的一个或多个事件

由空格分隔多个事件值。

如果只规定了该参数,则会删除绑定到指定事件的所有函数。
function 可选。规定从元素的指定事件取消绑定的函数名。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("p").unbind();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落可以令其消失。包括本段落。</p>
<button>删除 p 元素的事件处理器</button>
</body>
</html>
$(selector).unbind(eventObj)
参数 描述
eventObj 可选。规定要使用的事件对象。这个 eventObj 参数来自事件绑定函数。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var x=0;
  $("p").click(function(e){
    $("p").animate({fontSize:"+=5px"});
    x++;
    if (x>=2)
      {
      $(this).unbind(e);
      }
  });
});
</script>
</head>
<body>
<p style="font-size:20px;">点击这个段落可以增加其大小。只能增加两次。</p>
</body>
</html>

相关文章

网友评论

      本文标题:事件的取消与添加

      本文链接:https://www.haomeiwen.com/subject/cgapyctx.html