Événements jQuery : comparaison entre la méthode bind et la méthode blur()-js tutoriel-php.cn

Événements jQuery : comparaison entre la méthode bind et la méthode blur()

黄舟

Libérer： 2017-06-26 14:10:54

original

2089 Les gens l'ont consulté

Méthode 1.bind

Définition et utilisation

La méthode bind() ajoute un ou plusieurs à l'élément sélectionné Événement gestionnaires routines et fonctions qui s'exécutent lorsqu'un événement se produit.

Depuis la version 1.7 de jq, la méthode on() est la méthode préférée pour ajouter des gestionnaires d'événements aux éléments sélectionnés

Syntaxe

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

Copier après la connexion

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

<🎜> Plusieurs valeurs d'événement séparées par des espaces. Doit être un événement valide. Facultatif. Spécifie des données supplémentaires à transmettre à la fonction. fonctionObligatoire . Spécifie une fonction à exécuter lorsqu'un événement se produit. Spécifie le mappage d'événements ({event:function, event:function, ...}), y compris Un ou plusieurs événements à ajouter à l'élément et une fonction à exécuter lorsque l'événement se produit.

例1、给

标签添加一个单击事件

<!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>

Copier après la connexion

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

Copier après la connexion

注意：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>

Copier après la connexion

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

Copier après la connexion

2、blur()方法

定义和用法

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

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

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

语法

为被选元素触发 blur 事件：

$(selector).blur()

Copier après la connexion

添加函数到 blur 事件：

$(selector).blur(function)

Copier après la connexion

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

Copier après la connexion

在输入框写些东西，然后点击输入框外，让其失去焦点。

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!