イベントについて
結合1.イベント
1.1基本的なバインディング
// 单击与双击事件
$(element).click(function(){});
$(element).dblclick(function(){});
// 加载完毕事件
$(document).ready(function(){});
$(function(){});
バインディング1.2メソッド
$(element).bind('click', function(){}); // 绑定事件
$(element).unbind(); // 解除事件绑定
1.3ダイナミックバインディング
- 注：この方法に住んでいるのjQueryの高いバージョン（> 1.8.3）から削除され、使用するバージョンに注意してください
$(element).live('click', function(){});
2.トリガ・イベント
2.1トリガ言葉遣い
- 我々は要素のイベントをトリガしたいときは、使用することができます
trigger
- 注：イベントの種類に必要な要素を
$(element).trigger('click'); // 必须指定元素的事件类型，如此处的 click
2.2通常のマウスイベント
| マウスのクリック・イベント |
クリック |
| マウスのダブルクリックイベントを |
dbclick |
| マウスが移動し、イベントを |
マウスオーバー |
| マウスのうちイベント |
マウスアウト |
| マウスプレスイベント |
マウスダウン |
| マウスのリフトイベント |
mouseup |
| マウス移動イベント |
MouseMove |
$('div').mousedown(function(){
console.log("鼠标被按下了");
});
3.イベントバブリングとデフォルトの動作
3.1イベントバブリング
- ときにトリガイベント要素、自動的に混乱ページにつながる、同時イベントで、その結果、イベントの同じタイプのその要素の親や先祖レベルをトリガし、我々はバブルを呼び出すイベント
- この時点では、イベントハンドラ内の要素のうちの1つを返すことができます
false防ぐために
- 注：このメソッドはjQueryのでの使用に限定されます
3.2デフォルトの動作
- ページには、デフォルトの動作を持っているいくつかの要素、など
- ジャンプ以上の要素が提出される予定で、これらの行為は、「デフォルトの動作」と呼ばれています
- しかし、イベントに結合した後、それは最初の最初のイベントを実行し、デフォルトの動作を実行します
- 私たちは、トリガ・イベントをさせたいのですが、デフォルトの動作をしない場合、我々は要素がいる場合に返すことができます
falseデフォルトの動作を防ぐために
<a href="https://www.cnblogs.com">点我去博客园</a>
$('a').click(function(){
alert("单击事件被触发了");
return false; // 阻止默认行为
});
4.押し下げマウスボタンの現在位置を取得し
- 我々は、マウスやキーボードのイベントを持っています
- ときにトリガイベント、我々は場合は、マウスの位置やキーボードのキー情報を取得したいです
- まず、現在のイベントが必要なイベントオブジェクトを渡します
event
$(element).click(function(e){
// e for enent，类似于在 Python 中写 Class 时要加 self
// 能够获取鼠标的 x 轴和 y 轴坐标，坐标位置相对于浏览器窗口
var x = e.clientX;
var y = e.clientY;
// 能够获取鼠标的 x 轴和 y 轴坐标，坐标位置相对于文档
var _x = e.pageX;
var _y = e.pageY;
});
$(element).keydown(function(e){
// 可以打印 e 对象，或者直接使用该对象中的 keyCode 属性来获取按键信息
var key = e.keyCode;
console.log(key);
});