首页 >web前端 >js教程 >jQuery事件：bind方法和blur()方法的对比

jQuery事件：bind方法和blur()方法的对比

黄舟原创: 2017-06-26 14:10:542113浏览

1.bind 方法

定义和用法

bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

自jq版本1.7起，on()方法是被选中元素添加事件处理程序的首选方法

语法

$(selector).bind(event,data,function,map)

参数	描述
event	必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

例1、给e388a4556c0f65e1904146cc1a846bee标签添加一个单击事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>给<p>标签添加一个单击事件</title>
<script src=" 
</script>
<script>
$(document).ready(function(){
  $("p").bind("click",function(){
    alert("这个段落被点击了。");
  });
});
</script></head><body><p>点我！</p></body></html>

例2、向元素添加多个事件。（添加多个事件）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>
向元素添加多个事件
</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").bind("mouseover mouseout",function(){
    $("p").toggleClass("intro");
  });
});
</script>
<style type="text/css">
.intro
{
font-size:150%;
color:red;
}
</style>
</head>
<body>
<p>将鼠标移动到该段落上。</p>
</body>
</html>

注意：toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。如果不存在指定的类则添加类，如果已设置则删除之。

例3、使用事件映射来向被选元素添加一些事件/函数（使用事件映射）

<!DOCTYPE
 html>
<html>
<head>
<meta charset="utf-8"> 
<title>
使用事件映射来向被选元素添加一些事件/函数
</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","#E9E9E4");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>点我！</button>
</body>
</html>

例4、向一个自定义命名的事件处理程序传递数据。（向函数传递数据）

<!DOCTYPE
 html>
<html>
<head>
<meta charset="utf-8"> 
<title>
向一个自定义命名的事件处理程序传递数据
</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function handlerName(e) 
{
alert(e.data.msg);
}
$(document).ready(function(){
$("p").bind("click", {msg: "你刚点击了!"}, handlerName)
});
</script>
</head>
<body>
<p>点我！</p>
</body>
</html>

2、blur()方法

定义和用法

当元素失去焦点时发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。

提示：该方法常与 focus() 方法一起使用。

语法

为被选元素触发 blur 事件：

$(selector).blur()

添加函数到 blur 事件：

$(selector).blur(function)

参数	描述
function	可选。规定当 blur 事件发生时运行的函数。

例1、添加函数到blur事件，当input字段失去焦点时发生blur事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>
添加函数到blur事件
</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").blur(function(){
    alert("输入框失去了焦点");
  });
});
</script>
</head>
<body>

e388a4556c0f65e1904146cc1a846bee在输入框写些东西，然后点击输入框外，让其失去焦点。94b3e26ee717c64999d7867364b1b4a3
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

例2、填写表单时需要实现如下效果

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>鼠标点击后无文字，挪开鼠标后有文字</title>
<script language="JavaScript"src="../jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
     $(function(){
         /*进入焦点时触发*/
         $("#account").focus(function(){
              varoldValue = $(this).val();
              if(oldValue == this.defaultValue){
                  $(this).val("");
              }
         });  
         /*失去焦点时触发*/
         $("#account").blur(function(){
              alert("12");
              varoldValue = $(this).val();
              if(oldValue == ""){
                   $(this).val(this.defaultValue);
              }
         });
     });
</script>
</head>
<body>
帐号：<input id="account"name="account" type="text" value="请输入帐号">
</body>
</html>

以上是jQuery事件：bind方法和blur()方法的对比的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：jquery中blur()失去焦点与focus() 获取焦点事件下一篇：jquery失去焦点事件了blur的示例代码分享

查看更多