JavaScript 事件(六)

作者: EmileSu_大苏 | 来源:发表于2017-11-27 19:45 被阅读0次

JavaScript 事件(六)
Js事件循环
JavaScript绑定事件的三种方式
javascript 中的事件机制
JavaScript的事件机制
javascript-事件基础和事件绑定
事件学习总结
JavaScript ☞ day3
学习记录_javaScript_事件处理
JavaScript入门（下）事件响应、内置对象、浏览器对象、D

脚本响应事件的方式, 通常是更新 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 &amp; 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 &amp; 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);

JavaScript 事件(六)
脚本响应事件的方式, 通常是更新 web 页面内容交互操作创建事件 --> 事件触发代码 --> 代码反馈信息给...
Js事件循环
列表 JavaScript事件循环测试金字塔 stub JavaScript事件循环理解 javaScript语...
JavaScript绑定事件的三种方式
@(javascript)[JavaScript事件绑定] JavaScript绑定事件的三种方式使用内联使用...
javascript 中的事件机制
js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件：JavaScript是基于事件驱动...
JavaScript的事件机制
在JavaScript的学习中，我们经常会遇到JavaScript的事件机制，例如，事件绑定、事件监听、事件委托（...
javascript-事件基础和事件绑定
javascript-事件基础和事件绑定一、事件驱动 1.1事件 javascript侦测到的用户的操作(点击、...
事件学习总结
一、事件 1. 事件的发生 JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件...
JavaScript ☞ day3
JavaScript基础学习笔记之JavaScript进阶焦点事件鼠标事件-单击与双击鼠标事件-mouseo...
学习记录_javaScript_事件处理
1. javaScript事件处理 [1. javaScript事件处理][1.1 在页面body加载事件][1....
JavaScript入门（下）事件响应、内置对象、浏览器对象、D
事件响应什么是事件 JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页...