原生js和jquery框架下繫結事件的方法
一、原生js的事件的繫結
1、通過JavaScript物件屬性進行繫結
document.getElementById("test1").onclick=function(){alert("你好！")};
document.getElementsByTagName ("test")[0].onclick=function(){alert("你好")};
document.body.onclick=function(){alert("first");};
document.body.oncopy=function(){alert("coped")};
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <script> window.onload = function(){ //原生js的預載入 document.body.oncopy=function(){alert("coped");} } </script> </head> <body> <div>積分客戶端上看價格</div> </body> </html>
|
屬性 |
當以下情況發生時，出現此事件 |
|
onabort |
影象載入被中斷 |
|
onblur |
元素失去焦點 |
|
onchange |
使用者改變域的內容 |
|
onclick |
滑鼠點選某個物件 |
|
ondblclick |
滑鼠雙擊某個物件 |
|
onerror |
當載入文件或影象時發生某個錯誤 |
|
onfocus |
元素獲得焦點 |
|
onkeydown |
某個鍵盤的鍵被按下 |
|
onkeypress |
某個鍵盤的鍵被按下或按住 |
|
onkeyup |
某個鍵盤的鍵被鬆開 |
|
onload |
某個頁面或影象被完成載入 |
|
onmousedown |
某個滑鼠按鍵被按下 |
|
onmousemove |
滑鼠被移動 |
|
onmouseout |
滑鼠從某元素移開 |
|
onmouseover |
滑鼠被移到某元素之上 |
|
onmouseup |
某個滑鼠按鍵被鬆開 |
|
onreset |
重置按鈕被點選 |
|
onresize |
視窗或框架被調整尺寸 |
|
onselect |
文字被選定 |
|
onsubmit |
提交按鈕被點選 |
|
onunload |
使用者退出頁面 |
2、通過HTML屬性進行事件處理函式的繫結
＜a href="#" onclick="f()"＞
二、jquery中事件的繫結
$("button").click(function(){$("p").slideToggle();});
//點選button，顯示或隱藏button
但是如果這段js放在<header></header>之間，就得預載入，如下：
$(function(){ //jquery框架下的預載入
$("button").click(function(){ $("p").slideToggle();});
});
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="jquery.js"></script>
<script>
$(function(){//jquery下的預載入
$("body").bind({ //bind或者on都能達到同樣效果
copy:function(){
alert("copyed!");
},
});
$("#key").click(function(){
alert("clicked!");
});
});
</script>
</head>
<body>
積分客戶端上看
<button id="key">價格</button>
</body>
</html>|
向匹配元素附加一個或更多事件處理器 |
|
|
觸發、或將函式繫結到指定元素的 blur 事件 |
|
|
觸發、或將函式繫結到指定元素的 change 事件 |
|
|
觸發、或將函式繫結到指定元素的 click 事件 |
|
|
觸發、或將函式繫結到指定元素的 double click 事件 |
|
|
向匹配元素的當前或未來的子元素附加一個或多個事件處理器 |
|
|
移除所有通過 live() 函式新增的事件處理程式。 |
|
|
觸發、或將函式繫結到指定元素的 error 事件 |
|
|
包含由被指定事件觸發的事件處理器返回的最後一個值。 |
|
|
該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。 |
|
|
觸發、或將函式繫結到指定元素的 focus 事件 |
|
|
觸發、或將函式繫結到指定元素的 key down 事件 |
|
|
觸發、或將函式繫結到指定元素的 key press 事件 |
|
|
觸發、或將函式繫結到指定元素的 key up 事件 |
|
|
為當前或未來的匹配元素新增一個或多個事件處理器 |
|
|
觸發、或將函式繫結到指定元素的 load 事件 |
|
|
觸發、或將函式繫結到指定元素的 mouse down 事件 |
|
|
觸發、或將函式繫結到指定元素的 mouse enter 事件 |
|
|
觸發、或將函式繫結到指定元素的 mouse leave 事件 |
|
|
觸發、或將函式繫結到指定元素的 mouse move 事件 |
|
|
觸發、或將函式繫結到指定元素的 mouse out 事件 |
|
|
觸發、或將函式繫結到指定元素的 mouse over 事件 |
|
|
觸發、或將函式繫結到指定元素的 mouse up 事件 |
|
|
向匹配元素新增事件處理器。每個元素只能觸發一次該處理器。 |
|
|
文件就緒事件（當 HTML 文件就緒可用時） |
|
|
觸發、或將函式繫結到指定元素的 resize 事件 |
|
|
觸發、或將函式繫結到指定元素的 scroll 事件 |
|
|
觸發、或將函式繫結到指定元素的 select 事件 |
|
|
觸發、或將函式繫結到指定元素的 submit 事件 |
|
|
繫結兩個或多個事件處理器函式，當發生輪流的 click 事件時執行。 |
|
|
從匹配元素移除一個被新增的事件處理器 |
|
|
從匹配元素移除一個被新增的事件處理器，現在或將來 |
|
|
觸發、或將函式繫結到指定元素的 unload 事件 |
補充：jquery的選擇器
|
語法 |
描述 |
|
$(this) |
當前 HTML 元素 |
|
$("p") |
所有 <p> 元素 |
|
$("p.intro") |
所有 class="intro" 的 <p> 元素 |
|
$(".intro") |
所有 class="intro" 的元素 |
|
$("#intro") |
id="intro" 的元素 |
|
$("ul li:first") |
每個 <ul> 的第一個 <li> 元素 |
|
$("[href$='.jpg']") |
所有帶有以 ".jpg" 結尾的屬性值的 href 屬性 |
|
$("div#intro .head") |
id="intro" 的 <div> 元素中的所有 class="head" 的元素 |