一.什么是事件
01.事件的概念
事件是发生并得到处理的操作，即：事情来了，然后处理。
如：
1、电话铃声响起（事件发生） ---需要接电话（事件处理）
2、学生举手请教问题（事件发生） —需要解答（事件处理）
3、9点半提醒大家开始上课（事件发生）---打开直播开始上课（事件处理）
4、按钮被点击了（事件发生）， ---网页会反馈（事件处理）
---- 事件绑定 :
---- 事件绑定：
1.1 事件绑定模型:
- JavaScript 有两种事件绑定模型：内联模型、外联(脚本)模型.
事件绑定—内联模式
- 这种模型是最传统接单的一种处理事件的方法。在内联模型中，事件处理函 数是 HTML 标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但 它是和 HTML 混写的， 并没有与 HTML分离。
事件绑定—外联(脚本)模式
- 由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，我们可以在 JavaScript中处理事件。这种处理方式就是外联(脚本)模型。
二.常见事件类型
JavaScript 可以处理的事件类型为：⿏标事件、键盘事件、HTML 事件。
-
⿏标事件（⻚⾯所有标签都可以触发）
click： 当用户单击鼠标按钮或按下回车键时触发 dblclick： 当用户双击主鼠标按钮时触发。 mousedown：当用户按下了鼠标还未弹起时触发。 mouseup： 当用户释放鼠标按钮时触发。 mouseover： 当鼠标移到某个元素上方时触发。 mouseout： 当鼠标移出某个元素上方时触发。 mousemove： 当鼠标指针在元素上移动时触发。 -
键盘事件（表单和全局window）
keydown： 当用户按下键盘上任意键触发，如果按住不放，会重复触发。 keypress： 当用户按下键盘上的字符键触发，如果按住不放，会重复触发。 keyup： 当用户按下了鼠标还未弹起时触发。 -
HTML事件(window事件,全局window）
load： 当页面完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发。 unload：当页面完全卸载后在 window 上面触发，或当框架集卸载后在框架集上触发。 scroll： 当用户滚动带滚动条的元素时触发。 resize： 当窗口或框架的大小变化时在 window 或框架上触发。 -
HTML事件(表单事件）
blur： 当页面或元素失去焦点时在 window 及相关元素上触发。 focus： 当页面或者元素获得焦点时在 window 及相关元素上面触发。 select： 当用户选择文本框(input 或 textarea)中的一个或多个字符触发。 change： 当文本框(input 或 textarea)内容改变且失去焦点后触发。 submit： 当用户点击提交按钮在<form>元素上触发。 reset： 当用户点击重置按钮在<form>元素上触发。
三.事件对象
事件对象（番茄炒蛋）
3.1 事件对象（如何产⽣）
3.2 拿到事件对象
- 事件绑定：
元素节点.on + 事件类型 = 匿名函数;
事件对象：一旦完成事件绑定操作，就会产生一个事件对象（系统根据事件绑定自动生成的）。
【注】当点击按钮以后，系统会调用这个函数，系统会自动将事件对象，传入到函数的第一个参数。
【注】但问题是，点击按钮以后，函数是我们自己调用的么？ - 标准写法:
四. 时间对象属性
- button属性（⿏标事件）
/*
button
0 左键
1 滚轮
2 右键
*/
window.onload = function(){
document.onmousedown = function(ev){
var e = ev || window.event;
alert(e.button);//0或者1或者2
}
}
-
获取⿏标坐标的属性
clientX clientY 原点位置，窗口可视区域左上角为原点 pageX pageY 原点位置，整个页面的左上角（带滚动高度） screenX screenY 原点位置，整个屏幕的左上角 offsetX offsetY 相对于当前被按下标签的左上角 -
修改键属性
有时,我们需要通过键盘上的某些键来配合⿏标来触发⼀些特殊的事件。 这些键为:Shfit、Ctrl、Alt 和 Meat(Windows中就是Windows 键，苹果机中是command 键)， 它们经常被⽤来修改⿏标事件和⾏为，所以叫修改键。
-
键盘事件对象属性(键码)
在发生 keydown 和 keyup 事件时,event对象的keyCode属性,keyCode属性的值 与ASCII 码中对应大写字母或数字的编码相同。字母中大小写不影响。
//keyCode 键码只在keydown下支持（支持全键盘）
//【注】键码返回当前按下键的ASCII值，但是统一返回大写字母的ASCII码值
//跨浏览器兼容：var which = e.which || e.keycode;
window.onkeydown = function(ev){
var e = ev || window.event;
//alert(e.keycode);
var which = e.which || e.keycode;
alert(which);
}
-
键盘事件对象属性（字符码）
Firefox、Chrome和Safari的event 对象都支持一个charCode属性， 这个属性只有在发生 keypress 事件时才包含值，而且这个值是按下的那个键所代表字符的 ASCII 编码。此时的keyCode通常等于0。
//keyCode 键码只在keypress下支持（只支持字符键）
//【注】键码返回当前按下键的ASCII值，区分大小写
//跨浏览器兼容：var which = e.charCode || e.which;
window.onkeypress = function(ev){
var e = ev || window.event;
//alert(e.keycode);
var which = e.charCode || e.which;
alert(which);
}
五. 事件监听器
- 浏览器兼容IE8以下
function addEvent(node,eventType,funcName){
if(node.addEventListener){
node.addEventListener(eventType,funcName,false);
}else{
node.attachEvent("on" + eventType,funcName);
}
}
function removeEvent(node,eventType,funcName){
if (node.removeEventListener) {
node.removeEventListener(eventType,funcName);
}else{
node.detachEvent("on" + eventType,funcName);
}
}
六. mouseenter和mouseleave的区别
类似mouseover，它们两者之间的差别是mouseenter 不会冒泡（bubble），也就是说当指针从它的⼦层物理空间移到它的物理空间上时不会触发，
同理类似mouseout，它们两者之间的差别是mouseleave 不会冒泡（bubble），也就是说当指针从它的⼦层物理空间移到它的物理空间上时不会触发
【注】在IE的全系列中都实现了mouseenter和mouseleave事件，但是在早期的w3c浏览器中却没有实现这两个事件。有时候，我们需要使用，mouseenter事件来防止子元素的冒泡，这就涉及到事件兼容性的问题了。
2343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
