PS、//不是所有浏览器都支持 console.log 解决办法定义一个输出函数 调用即可 若出错则注释掉
function conlog(event){
console.log(event);
}
1、事件常用方法
2、事件之绑定
3、事件目标和冒泡
关注两个点：currenttarget
target
4、自定义事件
代码如下（代码中包含相关注释讲解）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择器和事件</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="event.js"></script>
</head>
<body>
<button>click here</button>
<button id="cb">click me</button>
<div style="width:300px;height:300px;background-color: bisque">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</div>
<button id="cb2">click again</button>
</body>
</html>javascript 部分
/**
* Created by qing on 2015/8/19.
*/
//事件常用方法
$(document).ready(function(){
//$("button").click(function(){ //鼠标单击
// $("button").dblclick(function(){ //双击
//$("button").mouseenter(function(){ // 鼠标移上
//$("button").mouseleave(function(){ //鼠标移除 可查阅API 还有很多比如光标聚集等
// $(this).hide();
//})
});
//事件之绑定 接触绑定事件
$(document).ready(function(){
//$("#cb").click(function(){ //代码量大的时候这种写法不简洁 占内存
// alert("点击我");
//})
//$("#cb").bind("click",clickHandle1);
//$("#cb").bind("click",clickHandle2);
//$("#cb").unbind("click");//解除所有点击事件
//$("#cb").unbind("click",clickHandle2);//解除某个点击事件
//jq1.7以后可以这样 官方推荐 底层也是调用on off
// $("#cb").on("click",clickHandle1);
// $("#cb").on("click",clickHandle2);
//$("#cb").off("click");//解除所有点击事件
//$("#cb").off("click",clickHandle2);//解除某个点击事件
});
function clickHandle1(e){ //参数e???
console.log("完成事件绑定bind")
}
//可以绑定几个事件
function clickHandle2(e){ //参数e???
console.log("完成事件绑定bind2")
}
//事件目标和事件冒泡
$(document).ready(function(){
//$("body").bind("click",bodyHandle); //若点击DIV部分，则currenttarget为body,target为DIV
//$("div").bind("click",divHandle);
//$("div").bind("click",divHandle2);
})
function bodyHandle(event){
console.log(event);
}
function divHandle(event){
console.log(event);
//event.stopPropagation(); //阻止父级冒泡事件 就是只点击DIV 不触发body的点击事件
event.stopImmediatePropagation(); // 阻止所有冒泡事件 意思是只有divHandle可以实现
}
function divHandle2(event){
//console.log("hellow");
conlog(event);
}
//不是所有浏览器都支持 console.log 解决办法定义一个输出函数 调用即可 若出错则注释掉
function conlog(event){
console.log(event);
}
//自定义事件
var cb2;
$(document).ready(function(){
cb2=$("#cb2"); //简便
cb2.click(function (){
var e=jQuery.event("MyEvent"); //通过jq创建一个对象？
cb2.trigger(e) //?申明
});
cb2.bind("MyEvent",function(event){
console.log(event);
})
});自定义事件报错：Uncaught TypeError: object is not a function
不知道是不是 cb2.trigger(e)这儿有问题，解决之后会继续完善
