腳本響應事件的方式, 通常是更新 web 頁面內(nèi)容
交互操作創(chuàng)建事件 --> 事件觸發(fā)代碼 --> 代碼反饋信息給用戶
UI 事件
當與瀏覽器 UI 本身交互時發(fā)生的事件
load - Web 頁面加載完成
unload - Web 頁面正在卸載
error - 瀏覽器遇到 JS 錯誤或不存在的資源
resize - 瀏覽器窗口的大小發(fā)生變化
scroll - 用戶使用滾動條移動了頁面
鍵盤事件
當用戶操作鍵盤時發(fā)生
keydown - 用戶第一次按下一個鍵(按住這個鍵時會反復觸發(fā))
keyup - 用戶松開了一個鍵
keypress - 輸入一個字符//例:表單鍵入并直接顯示 var el; // Declare variables function charCount(e) { // Declare function var textEntered, charDisplay, counter, lastkey; // Declare variables textEntered = document.getElementById('message').value; // User's text charDisplay = document.getElementById('charactersLeft'); // Counter element counter = (180 - (textEntered.length)); // Num of chars left charDisplay.textContent = counter; // Show chars left lastkey = document.getElementById('lastKey'); // Get last key elem lastkey.textContent = 'Last key in ASCII code: ' + e.keyCode; // Create msg } el = document.getElementById('message'); // Get msg element el.addEventListener('keyup', charCount, false); // on keyup - call charCount()
鼠標事件
當用戶操作鼠標或觸控屏幕
click - 單擊一個元素
dblclick - 雙擊一個元素
mousedown - 在一個元素上按下
mouseup - 在一個元素上松開
mousemove - 移動鼠標(不會發(fā)生在觸屏上)
mouseover - 鼠標移到一個元素上(不會發(fā)生在觸屏上)
mouseout - 鼠標在一個元素上移開(不會發(fā)生在觸屏上)var msg = '<div class=\"header\"><a id=\"close\" href="#">close X</a></div>'; msg += '<div><h2>System Maintenance</h2>'; msg += 'Our servers are being updated between 3 and 4 a.m. '; msg += 'During this time, there may be minor disruptions to service.</div>'; var elNote = document.createElement('div'); // Create a new element elNote.setAttribute('id', 'note'); // Add an id of note elNote.innerHTML = msg; // Add the message document.body.appendChild(elNote); // Add it to the page function dismissNote() { // Declare function document.body.removeChild(elNote); // Remove the note } var elClose = document.getElementById('close'); // Get the close button elClose.addEventListener('click', dismissNote, false);// Click close-clear note
焦點事件
當一個元素得到或失去一個焦點時
focus/focusin - 元素得到焦點
blur/focusout - 元素失去焦點function checkUsername() { // Declare function var username = el.value; // Store username in variable if (username.length < 5) { // If username < 5 characters elMsg.className = 'warning'; // Change class on message elMsg.textContent = 'Not long enough, yet...';// Update message } else { // Otherwise elMsg.textContent = ''; // Clear the message } } function tipUsername() { // Declare function elMsg.className = 'tip'; // Change class for message elMsg.innerHTML = 'Username must be at least 5 characters'; // Add message } var el = document.getElementById('username'); // Username input var elMsg = document.getElementById('feedback'); // Element to hold message // When the username input gains / loses focus call functions above: el.addEventListener('focus', tipUsername, false); // focus call tipUsername() el.addEventListener('blur', checkUsername, false);// blur call checkUsername()
表單事件
當用戶與表單元素發(fā)生交互時
input - 輸入框元素中發(fā)生了變化
change - 選框按鈕發(fā)生變化
submit - 用戶提交表單
reset - 用戶點了表單上的重置按鈕(少用)
cut - 用戶從表單中剪切了內(nèi)容
copy - 用戶從表單中復制了內(nèi)容
paste - 用戶向表單中粘貼了內(nèi)容
selet - 用戶在表單中選中了一些文本//表單提示和檢查代碼示例: //HTML 例: <!DOCTYPE html> <html> <head> <title>JavaScript & jQuery - Chapter 6: Events - Form Events</title> <link rel="stylesheet" href="css/c06.css" /> </head> <body> <div id="page"> <h1>List King</h1> <form method="post" action="http://www.example.org/register" id="formSignup"> <h2>Membership</h2> <label for="package" class="selectbox"> Select a package: </label> <select id="package"> <option value="annual">1 year ($50)</option> <option value="monthly">1 month ($5)</option> </select> <div id="packageHint" class="tip"></div> <input type="checkbox" id="terms" /> <label for="terms" class="checkbox"> Check to agree to terms & conditions</label> <div id="termsHint" class="warning"></div> <input type="submit" value="next" /> </form> </div> <script src="js/form.js"></script> </body> </html> //JS 例: var elForm, elSelectPackage, elPackageHint, elTerms, elTermsHint; // Declare variables elForm = document.getElementById('formSignup'); // Store elements elSelectPackage = document.getElementById('package'); elPackageHint = document.getElementById('packageHint'); elTerms = document.getElementById('terms'); elTermsHint = document.getElementById('termsHint'); function packageHint() { // Declare function var pack = this.options[this.selectedIndex].value; // Get selected option if (pack === 'monthly') { // If monthly package elPackageHint.innerHTML = 'Save $10 if you pay for 1 year!';//Show this msg } else { // Otherwise elPackageHint.innerHTML = 'Wise choice!'; // Show this message } } function checkTerms(event) { // Declare function if (!elTerms.checked) { // If checkbox ticked elTermsHint.innerHTML = 'You must agree to the terms.'; // Show message event.preventDefault(); // Don't submit form } } //Create event listeners: submit calls checkTerms(), change calls packageHint() elForm.addEventListener('submit', checkTerms, false); elSelectPackage.addEventListener('change', packageHint, false);
事件如何觸發(fā) JavaScript 代碼
事件處理三步驟:
- 一. 獲取觸發(fā)事件的 DOM 節(jié)點
- 二. 將事件綁定到 DOM 節(jié)點
1.傳統(tǒng)的 DOM 事件處理
element.onevent = functionName; //目標函數(shù)節(jié)點.事件帶"on"前綴 = 調(diào)用的函數(shù)名(后面不帶小括號) //例: function checkUsername() { //事件的函數(shù)代碼 } var el = document.getElementById('username'); el.onblur = checkUsername;2.DOM 監(jiān)聽器
element.addEventListener('event', functionName [, Boolean]); //元素.時間選擇器(事件"無on前綴", 函數(shù)代碼, 事件流"一般為 false") //例: function checkUsername() { //事件的函數(shù)代碼 } var el = document.getElementById('username'); el.addEventListener('blur', checkUsername, false);3.如何向事件中的函數(shù)傳參
//需要將事件函數(shù)封裝在匿名函數(shù)中 el.addEventListener( 'blur', function() { checkUsername(5); }, false );
- 三. 編寫事件需要自行的的函數(shù)(有名或匿名)
事件對象
可獲取事件的信息, 以及發(fā)生在哪個元素上
- 屬性
target -事件的目標元素
type - 事件的類型
cancelabel - 是否可撤銷事件在這個元素上的默認行為- 方法
preventDefault() - 撤銷這個事件的默認行為
stopPropagation() - 停止事件繼續(xù)冒泡或向下捕獲的過程
//使用事件對象例:
---
//無參數(shù)事件
function checkUsername(e) {
var target = e.target;
}
var el = document.getElementById('username');
el.addEventListener('blur', checkUsername, false);
---
//帶參數(shù)的事件
function checkUsername(e, minLength) {
var target = e.target;
}
var el = document.getElementById('username');
el.addEventListener(
'blur',
function() {
checkUsername(e, 5);
},
false
);
事件委托
為大量元素創(chuàng)建監(jiān)聽事件會影響頁面速度, 所以使用事件流在父元素上監(jiān)聽事件.
//HTML:
<div id="page">
<h1>List King</h1>
<h2>Buy groceries</h2>
<ul id="shoppingList">
<li class="complete"><a href="itemDone.php?id=1"><em>fresh</em> figs</a></li>
<li class="complete"><a href="itemDone.php?id=2">pine nuts</a></li>
<li class="complete"><a href="itemDone.php?id=3">honey</a></li>
<li class="complete"><a href="itemDone.php?id=4">balsamic vinegar</a></li>
</ul>
</div>
//JS例:
function itemDone(e) {
var target, elParent, elGrandparent;
target = getTarget(e);
elParent = target.parentNode;
elGrandparent = target.parentNode.parentNode;
elGrandparent.removeChild(elParent);
e.preventDefault;
}
var el = document.getElementById('shoppingList');
el.addEventListener('click', function(e){
itemDone(e);
}, false)
this 關(guān)鍵字指向函數(shù)的所有者
當沒有參數(shù)傳遞給函數(shù)時, 常常使用 this 作為溝通
function checkUsername(){
var elMsg = document.getElementById('feedback');
if (this.value.length < 5) {
elMsg.innerHTML = 'Not long enough';
} else {
elMsg.innerHTML = ' ';
}
}
var el = document.getElementById('username');
el.addEventListener('blur', checkUsername, false);
如果需要往函數(shù)傳遞參數(shù),那么this 關(guān)鍵字就會失效
因為這個函數(shù)的所有者不再是監(jiān)聽器所綁定的元素, 而是那個匿名函數(shù)
function checkUsername(el, minLength) {
var elMsg = document.getElementById('feedback')
if (el.value.length < minLength) {
elMsg.innerHTML = 'Not long enough';
} else {
elMsg.innerHTML = ' ';
}
}
var el = document.getElementById('username');
el.addEventListener('blur', function(){
checkUsername(el, 5);
}, false);
