JavaScript 事件(六)

脚本响应事件的方式, 通常是更新 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 = '
close X
';
msg += '
System Maintenance
';
msg += 'Our servers are being updated between 3 and 4 a.m. ';
msg += 'During this time, there may be minor disruptions to service.
';

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 例:


 
   
   
 
 
   

     
List King
     

       
Membership

        Select a package: 
       
         1 year ($50)
         1 month ($5)
       
       


       
        Check to agree to terms & conditions
       


       

       
     
     
   



//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:

  
List King
  
Buy groceries
  

    
fresh figs
    
pine nuts
    
honey
    
balsamic vinegar
  


//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);