jQuery 事件方法
事件方法會觸發匹配元素的事件，或將函數綁定到所有匹配元素的某個事件。
觸發實例：
$("button#demo").click()
上面的例子將觸發 id="demo" 的 button 元素的 click 事件。
綁定實例：
$("button#demo").click(function(){$("img").hide()})
上面的例子會在點擊 id="demo" 的按鈕時隱藏所有圖像。
| 方法 | 描述 |
|---|---|
| bind() | 向匹配元素附加一個或更多事件處理器 |
| blur() | 觸發、或將函數綁定到指定元素的 blur 事件 |
| change() | 觸發、或將函數綁定到指定元素的 change 事件 |
| click() | 觸發、或將函數綁定到指定元素的 click 事件 |
| dblclick() | 觸發、或將函數綁定到指定元素的 double click 事件 |
| delegate() | 向匹配元素的當前或未來的子元素附加一個或多個事件處理器 |
| die() | 移除所有通過 live() 函數添加的事件處理程序。 |
| error() | 觸發、或將函數綁定到指定元素的 error 事件 |
| event.isDefaultPrevented() | 返回 event 對象上是否調用了 event.preventDefault()。 |
| event.pageX | 相對於文檔左邊緣的鼠標位置。 |
| event.pageY | 相對於文檔上邊緣的鼠標位置。 |
| event.preventDefault() | 阻止事件的默認動作。 |
| event.result | 包含由被指定事件觸發的事件處理器返回的最后一個值。 |
| event.target | 觸發該事件的 DOM 元素。 |
| event.timeStamp | 該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。 |
| event.type | 描述事件的類型。 |
| event.which | 指示按了哪個鍵或按鈕。 |
| focus() | 觸發、或將函數綁定到指定元素的 focus 事件 |
| keydown() | 觸發、或將函數綁定到指定元素的 key down 事件 |
| keypress() | 觸發、或將函數綁定到指定元素的 key press 事件 |
| keyup() | 觸發、或將函數綁定到指定元素的 key up 事件 |
| live() | 為當前或未來的匹配元素添加一個或多個事件處理器 |
| load() | 觸發、或將函數綁定到指定元素的 load 事件 |
| mousedown() | 觸發、或將函數綁定到指定元素的 mouse down 事件 |
| mouseenter() | 觸發、或將函數綁定到指定元素的 mouse enter 事件 |
| mouseleave() | 觸發、或將函數綁定到指定元素的 mouse leave 事件 |
| mousemove() | 觸發、或將函數綁定到指定元素的 mouse move 事件 |
| mouseout() | 觸發、或將函數綁定到指定元素的 mouse out 事件 |
| mouseover() | 觸發、或將函數綁定到指定元素的 mouse over 事件 |
| mouseup() | 觸發、或將函數綁定到指定元素的 mouse up 事件 |
| one() | 向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。 |
| ready() | 文檔就緒事件（當 HTML 文檔就緒可用時） |
| resize() | 觸發、或將函數綁定到指定元素的 resize 事件 |
| scroll() | 觸發、或將函數綁定到指定元素的 scroll 事件 |
| select() | 觸發、或將函數綁定到指定元素的 select 事件 |
| submit() | 觸發、或將函數綁定到指定元素的 submit 事件 |
| toggle() | 綁定兩個或多個事件處理器函數，當發生輪流的 click 事件時執行。 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一個被匹配元素的指定事件 |
| unbind() | 從匹配元素移除一個被添加的事件處理器 |
| undelegate() | 從匹配元素移除一個被添加的事件處理器，現在或將來 |
| unload() | 觸發、或將函數綁定到指定元素的 unload 事件 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style/hdw.css"/>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easydrag.handler.beta2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.one').click(function(){
$('.box').show(); //顯示
});
$('span').click(function(){
$('.box').hide();//關閉
});
$('input').click(function(){
$('.box').show();
});
$('.box_all').easydrag();
});
</script>
<style type="text/css">
* { padding:0; margin:0; }
body { font-size:12px; padding:100px; }
.box_all { float:left; padding:5px; background:#eee; position:absolute; top:30%; left:30%;}
.box { width:500px; border:1px solid #4c7ebd; display:none; }
.box h1 { height:30px; line-height:30px; color:#fff; font-size:14px; background:#87b0e1; padding-left:10px; }
.box span { float:right; padding-right:10px; cursor:pointer;}
.box span a { display:block; height:30px; width:30px; background:url(img/close.jpg) no-repeat; text-indent:-9999px;}
.box span a:hover { background:url(img/close_hover.jpg) no-repeat;}
.box p { padding:10px; height:400px; background:#fff; border:3px solid #eee; }
.one { display:block;}
</style>
</head>
<body>
<a href="#" class="one">后盾網教程</a><br />
<input type="submit" class="one" value="后盾網教程" />
<br />
<input type="text" class="one" value="后盾網教程" />
<div class="box_all">
<div class="box">
<h1><span><a href="#">關閉</a></span>這是標題</h1>
<p>這是內容</p>
</div>
</div>
</body>
</html>
jquery.easydrag.handler.beta2.js JQ插件的使用：
$(“#box”).easydrag();//給指定的標簽綁定拖動效果，也可以是Class
$(“#box”).setHandler(‘handler’);//指定觸發拖動的元素，download best apps for iphone 5handler是該元素的idhttp://www.newipadipa.com/ ，后面我們需要修改它
首先這個插件真的很好用（廢話），短短2行代碼就能讓頁面中的div動起來。但是如果要拖動很多div的時候
，我們還是要稍微做出修改才能正常使用。
首先我的彈窗div在彈出的時候是默認在頁面正中的，但是要使用這個插件被拖動的div就要使
用”position:absolute”的屬性定位，這讓我們的居中非常困難。解決思路：在觸發彈窗之前用js獲取當前屏
幕的分辨率然后將div居中。
js代碼：
{
var div_width=Number(jQuery(‘#box’).css(‘width’));
var sc_width=(Number(window.screen.width)/2-(div_width/2)); //div距離瀏覽器左邊框的距離為屏幕寬
度的一半-div寬度的一半
jQ
uery(‘#box).css(‘left’,sc_width); } 好了，初始化之后就是拖動了，如果需要拖動的div不多的話這樣就可以了。但是我寫的頁面要拖動的div較多 ，而且這個插件只能用id號給元素綁定觸發拖動的屬性，如果一個id一個id的綁定事件的話會造成代碼冗余 。所以我們要修改一下源文件jquery.easydrag.handler.beta2.js：找到 function(handlerId) 這個函數， 將里面的$(“#”+handlerId)都改成$(“.”+handlerId)就可以了。好吧，這樣就可以了，下面是實例，高手們請 無視好了。。。
插件源碼：
/**
* EasyDrag 1.5 - Drag & Drop jQuery Plug-in
*
* Thanks for the community that is helping the improvement
* of this little piece of code.
*
* For usage instructions please visit http://fromvega.com/scripts
*/
(function($){
// to track if the mouse button is pressed
var isMouseDown = false;
// to track the current element being dragged
var currentElement = null;
// callback holders
var dropCallbacks = {};
var dragCallbacks = {};
// bubbling status
var bubblings = {};
// global position records
var lastMouseX;
var lastMouseY;
var lastElemTop;
var lastElemLeft;
// track element dragStatus
var dragStatus = {};
// if user is holding any handle or not
var holdingHandler = false;
// returns the mouse (cursor) current position
$.getMousePosition = function(e){
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return { 'x': posx, 'y': posy };
};
// updates the position of the current element being dragged
$.updatePosition = function(e) {
var pos = $.getMousePosition(e);
var spanX = (pos.x - lastMouseX);
var spanY = (pos.y - lastMouseY);
$(currentElement).css("top", (lastElemTop + spanY));
$(currentElement).css("left", (lastElemLeft + spanX));
};
// when the mouse is moved while the mouse button is pressed
$(document).mousemove(function(e){
if(isMouseDown && dragStatus[currentElement.id] != 'false'){
// update the position and call the registered function
$.updatePosition(e);
if(dragCallbacks[currentElement.id] != undefined){
dragCallbacks[currentElement.id](e, currentElement);
}
return false;
}
});
// when the mouse button is released
$(document).mouseup(function(e){
if(isMouseDown && dragStatus[currentElement.id] != 'false'){
isMouseDown = false;
if(dropCallbacks[currentElement.id] != undefined){
dropCallbacks[currentElement.id](e, currentElement);
}
return false;
}
});
// register the function to be called while an element is being dragged
$.fn.ondrag = function(callback){
return this.each(function(){
dragCallbacks[this.id] = callback;
});
};
// register the function to be called when an element is dropped
$.fn.ondrop = function(callback){
return this.each(function(){
dropCallbacks[this.id] = callback;
});
};
// disable the dragging feature for the element
$.fn.dragOff = function(){
return this.each(function(){
dragStatus[this.id] = 'off';
});
};
// enable the dragging feature for the element
$.fn.dragOn = function(){
return this.each(function(){
dragStatus[this.id] = 'on';
});
};
// set a child element as a handler
$.fn.setHandler = function(handlerId){
return this.each(function(){
var draggable = this;
// enable event bubbling so the user can reach the handle
bubblings[this.id] = true;
// reset cursor style
$(draggable).css("cursor", "");
// set current drag status
dragStatus[draggable.id] = "handler";
// change handle cursor type
$("#"+handlerId).css("cursor", "move");
// bind event handler
$("#"+handlerId).mousedown(function(e){
holdingHandler = true;
$(draggable).trigger('mousedown', e);
});
// bind event handler
$("#"+handlerId).mouseup(function(e){
holdingHandler = false;
});
});
}
// set an element as draggable - allowBubbling enables/disables event bubbling
$.fn.easydrag = function(allowBubbling){
return this.each(function(){
// if no id is defined assign a unique one
if(undefined == this.id || !this.id.length) this.id = "easydrag"+(new Date().getTime());
// save event bubbling status
bubblings[this.id] = allowBubbling ? true : false;
// set dragStatus
dragStatus[this.id] = "on";
// change the mouse pointer
$(this).css("cursor", "move");
// when an element receives a mouse press
$(this).mousedown(function(e){
// just when "on" or "handler"
if((dragStatus[this.id] == "off") || (dragStatus[this.id] == "handler" && !holdingHandler))
return bubblings[this.id];
// set it as absolute positioned
$(this).css("position", "absolute");
// set z-index
$(this).css("z-index", parseInt( new Date().getTime()/1000 ));
// update track variables
isMouseDown = true;
currentElement = this;
// retrieve positioning properties
var pos = $.getMousePosition(e);
lastMouseX = pos.x;
lastMouseY = pos.y;
lastElemTop = this.offsetTop;
lastElemLeft = this.offsetLeft;
$.updatePosition(e);
return bubblings[this.id];
});
});
};
})(jQuery);