脚本响应事件的方式, 通常是更新 web 页面内容
交互操作创建事件 --> 事件触发代码 --> 代码反馈信息给用户
UI 事件
当与浏览器 UI 本身交互时发生的事件
load - Web 页面加载完成
unload - Web 页面正在卸载
error - 浏览器遇到 JS 错误或不存在的资源
resize - 浏览器窗口的大小发生变化
scroll - 用户使用滚动条移动了页面
键盘事件
当用户操作键盘时发生
keydown - 用户第一次按下一个键(按住这个键时会反复触发)
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 - 移动鼠标(不会发生在触屏上)
mouseover - 鼠标移到一个元素上(不会发生在触屏上)
mouseout - 鼠标在一个元素上移开(不会发生在触屏上)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()
表单事件
当用户与表单元素发生交互时
input - 输入框元素中发生了变化
change - 选框按钮发生变化
submit - 用户提交表单
reset - 用户点了表单上的重置按钮(少用)
cut - 用户从表单中剪切了内容
copy - 用户从表单中复制了内容
paste - 用户向表单中粘贴了内容
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);
事件如何触发 JavaScript 代码
事件处理三步骤:
- 一. 获取触发事件的 DOM 节点
- 二. 将事件绑定到 DOM 节点
1.传统的 DOM 事件处理
element.onevent = functionName; //目标函数节点.事件带"on"前缀 = 调用的函数名(后面不带小括号) //例: function checkUsername() { //事件的函数代码 } var el = document.getElementById('username'); el.onblur = checkUsername;2.DOM 监听器
element.addEventListener('event', functionName [, Boolean]); //元素.时间选择器(事件"无on前缀", 函数代码, 事件流"一般为 false") //例: function checkUsername() { //事件的函数代码 } var el = document.getElementById('username'); el.addEventListener('blur', checkUsername, false);3.如何向事件中的函数传参
//需要将事件函数封装在匿名函数中 el.addEventListener( 'blur', function() { checkUsername(5); }, false );
- 三. 编写事件需要自行的的函数(有名或匿名)
事件对象
可获取事件的信息, 以及发生在哪个元素上
- 属性
target -事件的目标元素
type - 事件的类型
cancelabel - 是否可撤销事件在这个元素上的默认行为- 方法
preventDefault() - 撤销这个事件的默认行为
stopPropagation() - 停止事件继续冒泡或向下捕获的过程
//使用事件对象例:
---
//无参数事件
function checkUsername(e) {
var target = e.target;
}
var el = document.getElementById('username');
el.addEventListener('blur', checkUsername, false);
---
//带参数的事件
function checkUsername(e, minLength) {
var target = e.target;
}
var el = document.getElementById('username');
el.addEventListener(
'blur',
function() {
checkUsername(e, 5);
},
false
);
事件委托
为大量元素创建监听事件会影响页面速度, 所以使用事件流在父元素上监听事件.
//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 关键字指向函数的所有者
当没有参数传递给函数时, 常常使用 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);
如果需要往函数传递参数,那么this 关键字就会失效
因为这个函数的所有者不再是监听器所绑定的元素, 而是那个匿名函数
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);
