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)
Copy after login
| Parameters | Description |
|---|
| ##event | Required. Specifies one or more events to be added to the element.
Separate multiple event values by spaces. Must be a valid event.
|
| data | Optional. Specifies additional data to be passed to the function. |
| function | Required. Specifies a function to run when an event occurs. |
| map | Specifies event mapping ({event:function, event:function, ...}), Contains one or more events to be added to the element, and a function to run when the event occurs. |
例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>Copy after login
例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>Copy after login
注意：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>Copy after login
例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>Copy after login
2、blur()方法
定义和用法
当元素失去焦点时发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。
提示：该方法常与 focus() 方法一起使用。
语法
为被选元素触发 blur 事件：
$(selector).blur()
Copy after login
添加函数到 blur 事件：
$(selector).blur(function)
Copy after login
| 参数 | 描述 |
|---|
| 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>Copy after login
在输入框写些东西，然后点击输入框外，让其失去焦点。
