Heim > Web-Frontend > js-Tutorial > Hauptteil

jQuery-Ereignisse: Vergleich zwischen Bind-Methode und Blur()-Methode

黄舟
Freigeben: 2017-06-26 14:10:54
Original
2096 Leute haben es durchsucht

1.bind-Methode

Definition und Verwendung

Die bind()-Methode fügt ein oder mehrere zum ausgewählten Elementereignis hinzu Handler Routinen und Funktionen, die ausgeführt werden, wenn ein Ereignis auftritt.

Seit jq-Version 1.7 ist die on()-Methode die bevorzugte Methode, um Ereignishandler zu ausgewählten Elementen hinzuzufügen


Syntax

$(selector).bind(event,data,function,map)
Nach dem Login kopieren
ParameterDescription
eventErforderlich. Gibt ein oder mehrere Ereignisse an, die dem Element hinzugefügt werden sollen.
参数描述
event必需。规定添加到元素的一个或多个事件。

由空格分隔多个事件值。必须是有效的事件。
data可选。规定传递到函数的额外数据。
function必需。规定当事件发生时运行的函数。
map规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
<🎜>Mehrere Ereigniswerte durch Leerzeichen getrennt. Muss ein gültiges Ereignis sein.
Optional. Gibt zusätzliche Daten an, die an die Funktion übergeben werden sollen.
functionErforderlich . Gibt eine Funktion an, die ausgeführt werden soll, wenn ein Ereignis auftritt.
Gibt die Ereigniszuordnung an ({event:function, event:function, ...}), einschließlich Ein oder mehrere Ereignisse, die dem Element hinzugefügt werden sollen, und eine Funktion, die ausgeführt wird, wenn das Ereignis auftritt.

例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>
Nach dem Login kopieren


例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>
Nach dem Login kopieren

注意: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>
Nach dem Login kopieren


例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>
Nach dem Login kopieren

2、blur()方法

定义和用法

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

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

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


语法

为被选元素触发 blur 事件:

$(selector).blur()
Nach dem Login kopieren

添加函数到 blur 事件:

$(selector).blur(function)
Nach dem Login kopieren
参数描述
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>
Nach dem Login kopieren

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




例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>
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonjQuery-Ereignisse: Vergleich zwischen Bind-Methode und Blur()-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage