一、事件的概述
1、JavaScript 与 HTML 的交互是通过事件实现的，事件代表文档或浏览器窗口中某个有意义的时刻。可以使用仅在事件发生时执行的监听器（也叫处理程序）订阅事件。
2、事件意味着用户或浏览器执行的某种动作。比如，单击（click）、加载（load）、鼠标悬停（mouseover）。为响应事件而调用的函数被称为事件处理程序（或事件监听器）。事件处理程序的名字以"on"开头，因此 click 事件的处理程序叫作 onclick，而 load 事件的处理程序叫作 onload。
二、事件的模式
JavaScript有两种事件实现模式: 内联模式, 脚本模式。
1、内联模式
直接在HTML标签中添加事件。这种模式是最传统简单的一种处理事件的方法。但是这种模式中事件和HTML是混写的, 并没有将JS与HTML分离, 当代码量多了以后,对后期代码维护和扩展很不利。
<input type="button" value="按钮" onclick="alert('hello');" />
2、脚本模式
使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件。
var box = document.getElementById('box');
box.onclick = function() { //给box节点对象添加点击事件onclick
console.log('Hello world!');
};
注意：内联里面调用的方法的this会指向window（传递this）脚本模式的this会指向当前的调用者。
三、事件的分类
1、鼠标事件
1.1 click事件
在用户单击鼠标主键（通常是左键）或按键盘回车键时触发。
注意：“鼠标单击”定义为，用户在同一个位置完成一次mousedown动作和mouseup动作。它们的触发顺序是：mousedown首先触 发，mouseup接着触发，click最后触发。
1.2 dblclick事件
在用户双击鼠标主键（通常是左键）时触发。
1.3 mousemove事件
在鼠标光标在元素上移动时反复触发。
1.4 mouseover事件
在用户把鼠标光标从元素外部移到元素内部时触发。
1.5 mouseout事件
在用户把鼠标光标从一个元素移到另一个元素上时触发。移到的元素可以是原始元素的外部元素，也可以是原始元素的子元素。
1.6 mouseenter事件
在用户把鼠标光标从元素外部移到元素内部时触发。不会在光标经过后代元素时触发。
1.7 mouseleave事件
在用户把鼠标光标从元素内部移到元素外部时触发。也不会在光标经过后代元素时触发
1.8 mousedown事件
在用户按下任意鼠标键时触发。
1.9 mouseup事件
在用户释放鼠标键时触发。
1.10 contextmenu事件
contextmenu事件在一个节点上点击鼠标右键时触发，或者按下“上下文菜单”键时触发。
document.oncontextmenu=function(){ return false; }
2、键盘事件
2.1 keydown事件
用户按下键盘上某个键时触发，而且持续按住会重复触发。
2.2 keyup事件
用户释放键盘上某个键时触发。
2.3 keypress事件
用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。Esc 键也会触发这个事件。（非Ctrl、Alt、Shift和Meta）
注意：keypress和textinput事件是在新输入的文本真正插入到聚焦的文档元素前触发的。 如果用户一直按键不松开，就会重复触发keydown、keypress，直到用户松开才会触发keyup。
3、HTML事件
3.1 load事件
在 window 对象上，load 事件会在整个页面（包括所有外部资源如图片、JavaScript 文件和 CSS 文件）加载完成后触发。
3.2 unload事件
unload 事件会在文档卸载完成后触发。unload 事件一般是在从一个页面导航到另一个页面时触发，最常用于清理引用，以避免内存泄漏。
3.3 close事件
当窗口关闭是触发。
3.4 change事件
当 <input> 、 <select> 和 <textarea> 的值发生变化时都会触发change事件。只有全部修改完成时它才会触发。
具体分下面几种情况：
- 激活单选框（radio）或复选框（checkbox）时触发。
- 用户提交时触发。比如，从下列列表（select）完成选择，在日期或文件输入框完成选择。
- 当文本框或textarea元素的值发生改变，并且丧失焦点时触发
3.5 select事件
在文本框（<input>或 textarea）上当用户选择了一个或多个字符时触发。
3.6 focus事件
当元素获得焦点时触发。
3.7 blur事件
当元素失去焦点时触发。
3.8 reset事件
当表单重置（所有表单成员的值变回默认值）时触发。
3.9 submit事件
当表单数据向服务器提交时触发。
注意：submit事件的发生对象是form元素，而不是button元素（即使它的类型是submit），因为提交的是表单，而不是按 钮
3.10 scorll事件
当用户滚动包含滚动条的元素时在元素上触发。<body>元素包含已加载页面的滚动条。大多数 HTML 事件与 window 对象和表单控件有关。
网友评论