jQueryのショートカットイベント
イベント処理関数を使用してオブジェクト イベントのほぼすべての操作を完了できますが、たとえば、jQuery は、クリック イベントに対応する 2 つのメソッド click() と click(fn) を使用して、それぞれクリック イベントをトリガーします。そして、クリックイベントを設定します:
クリックイベントを設定します:
$("#testDiv").click(function(event) { alert("test div clicked ! "); });同等:
$("#testDiv").bind("click", function(event) { alert("test div clicked ! "); });クリックイベントをトリガーします:
$("#testDiv").click();
$("#testDiv").trigger("click");と同等であることに注意してください。トリガーTriggerHandlerの代わりにこのようなメソッドを英語ではjQueryでEvent Helpersと呼びます。良い翻訳メソッドが見つからないので、機能に応じて「ショートカットメソッド」と呼んでいます。
以下はjQueryのショートカットメソッドのリストです:
全て対応するイベントなので説明や例はこれ以上書きません| 名前 | 説明 | 例 | ||
| ぼかし( ) | ||||
| ぼかし( fn ) | ||||
| change( ) | ||||
| change( fn ) | click( ) | |||
| クリック(fn) | ||||
| dblclick( ) | ||||
| dblclick( fn ) | ||||
| エラー( ) | ||||
| エラー( fn ) | ||||
| フォーカス( ) | ||||
| focus( fn ) | ||||
| keydown( ) | ||||
| keydown( fn ) | ||||
| keypress( ) | ||||
| keypress( fn ) | ||||
| keyup( ) | ||||
| keyup( fn ) | ||||
| load( fn ) | ||||
| マウスダウン( fn ) | ||||
| mouseenter( fn ) | ||||
| mouseleave( fn ) | ||||
| mouseup( fn ) | ||||
| サイズ変更( fn ) | ||||
| スクロール( fn ) | ||||
| select( ) | ||||
| select( ) | ||||
|
学び続ける
||
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>click事件</title>
<style type="text/css">
div{
width:200px;
height:200px;
border:5px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").text("这是后来添加的内容");
})
$("p").dblclick(function(){
$("button").click();
})
})
</script>
</head>
<body>
<div></div>
<p>双击我触发click事件</p>
<button>点击触发事件</button>
</body>
</html>
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます |
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
