Home > Article > Web Front-end > jQuery events: comparison between bind method and blur() method

jQuery events: comparison between bind method and blur() method

黄舟Original: 2017-06-26 14:10:542085browse

1.bind method

Definition and usage

bind() method adds one or more to the selected elements Event handling procedures, and functions that run when an event occurs.

Since jq version 1.7, the on() method is the preferred method to add event handlers to the selected element

Syntax

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

Required. Specifies one or more events to be added to the element. Optional. Specifies additional data to be passed to the function. Required. Specifies a function to run when an event occurs. Specifies event mapping (

例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)

Parameters	Description
##event	Separate multiple event values by spaces. Must be a valid event.
data
function
map	{event:function, event:function, ...}), Contains one or more events to be added to the element, and a function to run when the event occurs.

参数	描述
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>

The above is the detailed content of jQuery events: comparison between bind method and blur() method. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：blur() loses focus and focus() gets focus event in jqueryNext article：blur() loses focus and focus() gets focus event in jquery

See more

jQuery events: comparison between bind method and blur() method

Definition and usage

Syntax

定义和用法

语法

Related articles