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)這兒有問題，解決之後會繼續完善
