1）选择器
$(".className")——类选择器；
$("#IDName")——ID选择器；
$("ElementTagName")——元素名选择器；
更多选择器点击打开链接
2）事件
click()——点击事件；
dblclick()——双击事件；
mouseenter()——鼠标进入事件；
mouseleave()——鼠标离开事件；
更多事件点击打开链接
3）事件的绑定和解绑
bind()、on()——事件绑定;
unbind()、off()——事件解绑；
注意on()、off()需要在jQuery1.7版本以上；
<button id="btn1">事件绑定</button>
<pre name="code" class="javascript">$(document).ready(function(){
$("#btn1").bind("click",clickHandler);
$("#btn1").bind("click",clickHandler2);
$("#btn1").unbind("click",clickHandler2);
});
function clickHandler(e){
console.log(e.target.innerHTML);
}function clickHandler2(e){
console.log(e.target.id);
}
4)事件的目标
currentTarget与target的区别:
1、target发生在事件流的目标阶段，而currentTarget发生在事件流的整个阶段（捕获、目标和冒泡阶段）;
2、只有当目标流处于目标阶段的时候才相同;
3、而当事件流处于捕获和冒泡阶段时，target指向被点击的对象，而currentTarget指向当前事件活动的对象，通常是事件的祖元素。
5）事件的冒泡
event.stopImmediatePropagation()——阻止所有元素的事件冒泡；
event.stopPropagation()——阻止父级元素的事件冒泡；
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Dom元素的设置</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="eventTarget.js"></script>
<style type="text/css">
#div1{
width:200px;
height: 200px;
background-color: #0088bb;
}
#div1 ul{
list-style-type: none;
}
</style>
</head>
<body>
<div id="div1">
<ul>
<li>广州恒大</li>
<li>山东鲁能</li>
<li>上海上港</li>
<li>北京国安</li>
<li>上海申花</li>
</ul>
</div>
</body>
</html>eventTarget.js的代码：
$(document).ready(function(){
$("body").bind("click",bodyHandler);
$("div").bind("click",divHandler);
$("div").bind("click",divHandler2);
});
function bodyHandler(e){
//currentTarget:body; target:div
console.log(e);
}
function divHandler(e){
//currentTarget:div; target:div
console.log(e);
//阻止父级元素的冒泡
//e.stopPropagation();
//阻止所有元素的冒泡
e.stopImmediatePropagation();
}
function divHandler2(e){
console.log(e);
}
6）自定义事件：
jQuery.Event("myEvent")——指定自定义事件的类型为myEvent;
$(selector).trigger(event,[param1,param2])——规定被选元素触发的事件；第一种书写方式：
//给element绑定hello事件
element.bind("hello",function(){
alert("hello world!");
});
//触发hello事件
element.trigger("hello");第二种书写方式：<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<title>trigger demo</title>
<script src="jquery-1.11.2.min.js"></script>
<script src="myEvent.js"></script>
</head>
<body>
<button id="btn">click me</button>
</body>
</html>myEvent.js代码：
//自定义事件
var btn;
$(document).ready(function(){
btn=$("#btn");
btn.click(function(){
//自定义事件类型
var e=jQuery.Event("myEvent");
//触发自定义事件
btn.trigger(e);
});
//绑定自定义事件
btn.on("myEvent",function(e){
console.log(e);
});
});
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/bboyjoe/article/details/47150397
