1.bind メソッド
定義と使用法
bind() メソッドは、選択した要素に 1 つ以上の イベント ハンドラー プログラムと、イベントの発生時に実行される関数を追加します。
jq バージョン 1.7 以降、選択した要素にイベント ハンドラーを追加するには on() メソッドが推奨されます
構文$(selector).bind(event,data,function,map)
ログイン後にコピー
パラメータ | 説明 |
| | 必須。要素に追加する 1 つ以上のイベントを指定します。
スペースで区切られた複数のイベント値。有効なイベントである必要があります。
|
| データ | はオプションです。関数に渡す追加データを指定します。 |
| 機能 | が必要です。イベントの発生時に実行する関数を指定します。 |
| map | は、要素に追加される1つ以上のイベントと、要素に追加されるときに実行される関数を含むイベントマップ({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>ログイン後にコピー
在输入框写些东西，然后点击输入框外，让其失去焦点。
