1.bind 메소드
bind() 메소드는 선택한 요소에 하나 이상의 이벤트 핸들러프로그램과 이벤트가 발생할 때 실행되는 함수를 추가합니다.
jq 버전 1.7부터 on() 메소드는 선택한 요소에 이벤트 핸들러를 추가하는 데 선호되는 메소드입니다
$(selector).bind(event,data,function,map)
| Parameters | Description |
|---|---|
| 이벤트 | 필수입니다. 요소에 추가할 하나 이상의 이벤트를 지정합니다. 여러 이벤트 값은 공백으로 구분됩니다. 유효한 이벤트여야 합니다. |
| 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>例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>在输入框写些东西，然后点击输入框外，让其失去焦点。