1.bind-Methode
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
$(selector).bind(event,data,function,map)
Parameter | Description | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
event | Erforderlich. Gibt ein oder mehrere Ereignisse an, die dem Element hinzugefügt werden sollen.
| ||||||||||
Optional. Gibt zusätzliche Daten an, die an die Funktion übergeben werden sollen. | |||||||||||
function | Erforderlich . 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>
例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>
在输入框写些东西,然后点击输入框外,让其失去焦点。