簡單事件綁定：
click(handler) 單擊事件
dbclick(handler) 雙擊事件
mouseenter(handler) 鼠標移入事件
mouseleave(handler)鼠標離開事件
focus(handler) 獲得焦點事件（input框經常用）
blur(handler) 失去焦點事件
keydown(handler) 鍵盤按下事件
keyup 鍵盤彈起來事件
change(handler) 事件，如：文本框值改變，下來列表值改變等
select() 用於input 文本框里的內容都被選中
綁定事件方法
綁定方法1
$(function(){ //在jq這樣的雙重綁定事件不會重疊 $("button").click(function(){ alert(1) }) $("button").click(function(){ alert(2) }) })
綁定方法2 事件源 . bind(" 事件1 事件二"，function(){}) 可以綁定多個事件
//綁定事件 方法2 bind 可以給一個對象寫多個觸發條件，執行一個函數 $("button").bind("click mouseenter",function(){ alert(1) })
綁定方法3 事件源的父親 . delegate(" 事件源" ，" 事件1 事件2"，function(){})
//第三種綁定方式 可以給他父級的子盒子綁定事件 $(".box").delegate(".box2","click mouseenter",function(){ alert(2) })
綁定方法4 .on("事件1 事件2"，“事件源”，{ json 可以當作data來看 }，function(){})
json可以傳參，可以用event獲取
jquery1.7版本后的才可以用
$(".box").on("click",".box2",{"name":111},function(event){ console.log(event.data) })
//最常用的事件綁定 $(".box2").on("click",{},function(){ alert(1) }) }
解綁事件
//第一中解綁事件 針對 click mouseenter bind綁定的事件 用什么綁定的就用什么解除 $("button").unbind("click");
//第二種解綁方式 delegate $(".box").delegate(".box2","click mouseenter",fn); $(".box").delegate(".box2","click mouseenter",fn2); function fn(){ alert(2) } function fn2(){ alert(3) } //這樣是解除了fn事件的所以事件 $(".box").undelegate(".box2","mouseenter",fn);
//第三種解綁的方法 $(".box").on("click mouseenter",".box2",{"name":111},function(event){ alert("0") }) $(".box").off("click",".box2")
事件被觸發
$(function () { $(document).on("click mouseenter", function () { alert("頁面被點擊了"); }); //事件觸發(1)(觸發瀏覽器行為) $(document).click(); $(document).mouseenter(); //事件觸發(2)(觸發瀏覽器行為) 點擊document的地方都會出發事件 $(document).trigger("mouseenter"); $(document).trigger("click"); //事件觸發(3)(不觸發瀏覽器行為) 點擊document 地方不出發事件 $(document).triggerHandler("mouseenter"); $(document).triggerHandler("click"); $("input").on("focus", function () { alert("我獲取了焦點！"); }); //事件觸發(2)(觸發瀏覽器行為)(執行程序，觸動事件) $(document).click(function () { $("input").trigger("focus"); }); // //事件觸發(3)(不觸發瀏覽器行為)(只執行程序 " console.log("我獲取了焦點！");"，不觸動事件(獲取鼠標） $(document).click(function () { $("input").triggerHandler("focus"); }); }) </script>
事件對象
event.data 傳遞給事件處理程序的額外數據
event.currentTarget 等同於this，當前DOM對象
event.pageX 鼠標相對於文檔左部邊緣的位置
event.target 觸發事件源，不一定===this
event.stopPropagation()； 阻止事件冒泡
event.preventDefault(); 阻止默認行為
event.type 事件類型：click，dbclick…
event.which 鼠標的按鍵類型：左1 中2 右3
event.keyCode 鍵盤按鍵代碼
<script> $(function(){ $(document).on("click",function(e){ console.log(e.data); console.log(e.currentTarget); console.log(e.pageX); console.log(e.target); console.log(e.stopPropagation); console.log(e.preventDefault); console.log(e.type); console.log(e.which); console.log(e.keyCode); }) }) </script>
簡單事件綁定：
click(handler) 單擊事件
dbclick(handler) 雙擊事件
mouseenter(handler) 鼠標移入事件
mouseleave(handler)鼠標離開事件
focus(handler) 獲得焦點事件（input框經常用）
blur(handler) 失去焦點事件
keydown(handler) 鍵盤按下事件
keyup 鍵盤彈起來事件
change(handler) 事件，如：文本框值改變，下來列表值改變等
select() 用於input 文本框里的內容都被選中
綁定事件方法
綁定方法1
<wiz_code_mirror>
$(function(){
//在jq這樣的雙重綁定事件不會重疊
$("button").click(function(){
alert(1)
})
$("button").click(function(){
alert(2)
})
})
綁定方法2 事件源 . bind(" 事件1 事件二"，function(){}) 可以綁定多個事件
<wiz_code_mirror>
//綁定事件 方法2 bind 可以給一個對象寫多個觸發條件，執行一個函數
$("button").bind("click mouseenter",function(){
alert(1)
})
綁定方法3 事件源的父親 . delegate(" 事件源" ，" 事件1 事件2"，function(){})
<wiz_code_mirror>
//第三種綁定方式 可以給他父級的子盒子綁定事件
$(".box").delegate(".box2","click mouseenter",function(){
alert(2)
})
綁定方法4 .on("事件1 事件2"，“事件源”，{ json 可以當作data來看 }，function(){})
json可以傳參，可以用event獲取
jquery1.7版本后的才可以用
<wiz_code_mirror>
$(".box").on("click",".box2",{"name":111},function(event){
console.log(event.data)
})
<wiz_code_mirror>
//最常用的事件綁定
$(".box2").on("click",{},function(){
alert(1)
})
}
解綁事件
<wiz_code_mirror>
//第一中解綁事件 針對 click mouseenter bind綁定的事件 用什么綁定的就用什么解除
$("button").unbind("click");
<wiz_code_mirror>
//第二種解綁方式 delegate
$(".box").delegate(".box2","click mouseenter",fn);
$(".box").delegate(".box2","click mouseenter",fn2);
functionfn(){
alert(2)
}
functionfn2(){
alert(3)
}
//這樣是解除了fn事件的所以事件
$(".box").undelegate(".box2","mouseenter",fn);
<wiz_code_mirror>
//第三種解綁的方法
$(".box").on("click mouseenter",".box2",{"name":111},function(event){
alert("0")
})
$(".box").off("click",".box2")
事件被觸發
<wiz_code_mirror>
$(function () {
$(document).on("click mouseenter", function () {
alert("頁面被點擊了");
});
//事件觸發(1)(觸發瀏覽器行為)
$(document).click();
$(document).mouseenter();
//事件觸發(2)(觸發瀏覽器行為) 點擊document的地方都會出發事件
$(document).trigger("mouseenter");
$(document).trigger("click");
//事件觸發(3)(不觸發瀏覽器行為) 點擊document 地方不出發事件
$(document).triggerHandler("mouseenter");
$(document).triggerHandler("click");
$("input").on("focus", function () {
alert("我獲取了焦點！");
});
//事件觸發(2)(觸發瀏覽器行為)(執行程序，觸動事件)
$(document).click(function () {
$("input").trigger("focus");
});
// //事件觸發(3)(不觸發瀏覽器行為)(只執行程序 " console.log("我獲取了焦點！");"，不觸動事件(獲取鼠標）
$(document).click(function () {
$("input").triggerHandler("focus");
});
})
</script>
事件對象
event.data 傳遞給事件處理程序的額外數據
event.currentTarget 等同於this，當前DOM對象
event.pageX 鼠標相對於文檔左部邊緣的位置
event.target 觸發事件源，不一定===this
event.stopPropagation()； 阻止事件冒泡
event.preventDefault(); 阻止默認行為
event.type 事件類型：click，dbclick…
event.which 鼠標的按鍵類型：左1 中2 右3
event.keyCode 鍵盤按鍵代碼
<wiz_code_mirror>
<script>
$(function(){
$(document).on("click",function(e){
console.log(e.data);
console.log(e.currentTarget);
console.log(e.pageX);
console.log(e.target);
console.log(e.stopPropagation);
console.log(e.preventDefault);
console.log(e.type);
console.log(e.which);
console.log(e.keyCode);
})
})
</script>