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 { 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; 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);