Table des matières
Maison
interface Web
js tutoriel
Événements jQuery : comparaison entre la méthode bind et la méthode blur()
interface Web
js tutoriel
Événements jQuery : comparaison entre la méthode bind et la méthode blur()
Événements jQuery : comparaison entre la méthode bind et la méthode blur()
bind
blur
jquery
事件
方法
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, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。 |
例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
在输入框写些东西，然后点击输入框外，让其失去焦点。