JS-JavaScript事件详解

JS运行和编译

语法分析

查找基本语法有没有错误

预解析

执行之前进行预解析
var、function关键字提前到当前作用域的顶部，变量默认值为undefined，函数默认值为函数体代码块，当函数与变量重名时，保留函数。

变量生命周期

全局变量的生命周期直至浏览器卸载页面才会结束。
局部变量只在函数的执行过程中存在，而在这个过程中会为局部变量在栈或堆上分配相应的空间，以存储它们的值，然后再函数中使用这些变量，直至函数结束

事件

用户的行为：onclick、ondblclick、onfocus、onblur、window.onload

是用户跟页面的交互，当用户跟页面进行一些“交流”的时候，页面通过js就会触发一些事件，比如鼠标点击的时候就会触发onclick事件，给这个事件绑定一个函数，那么这个时候函数就会被调用，代码就会被执行

事件类型：

鼠标事件：click，dbclick，mousedown，mouseup，mouseover，mouseout，mouseenter、 mouseleave、mousemove
鼠标滚轮：scroll，mousewheel
鼠标右键（上下文菜单：在不同环境下右键菜单不一样）：contextmenu
mouseover：鼠标在元素身上移动穿过子元素的时候会被反复触发
mouseenter：只是在进入元素的时候触发
键盘事件：keydown，keyup，keypress
表单事件：对表单元素操作之后会触发的事件
单选框、多选框、下拉菜单 状态改变的时候会触发 onchange 事件
表单提交的时候会触发 onsubmit ，触发在元素身上

this关键字:事件函数里面的this指的是事件触发对象

事件的原理

事件的原理和hover类似。可以做到:hover做不到的事，:hover只能操作当前的元素，但是事件绑定之后可以选择任何元素。

事件触发三要素：通过谁触发？ 通过什么触发？触发后要做什么？

事件的写法：

w3c标准：事件写在行内，但是因为结构和行为要分离，所以我们一般情况下用JavaScript的方法来绑定事件，只有再极少数情况下，才将事件写在行内，事件的绑定方法：

 浏览器中的节点(对象).on+事件句柄 = function( ){

      干什么？（放在浏览器中，不执行，当事件发生的时候再执行。）

 }

 oDiv.onclick=function(){     
      alert（1）
 }

事件总结：事件是给浏览器定义一个预处理函数，当事件触发的时候，执行函数，这就是事件。

当事件被触发的时候奥特曼会得到一个信息（事件对象），包含了跟事件相关的一些属性和方法的封装（如：事件发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等），只有事件在触发的时候才会得到。

 oDiv.onmousedown=function(e){
      alert（e）;
 }

JS缺德定律：事件对象有兼容问题；
所以我们先做好兼容再去使用事件对象：

e=e || window.event;

alert (e.buttons)观察.buttons的返回值；

鼠标事件及方法；

e.buttons
返回鼠标点击按键（1左键，2右键，4中键滚轮）

e.offsetX / offsetY
获取事件触发最近的盒子（事件源）的坐标

e.clientX / clientY
获取可视区的坐标（根据浏览器的定位）

e.screenX / screenY
获取整个屏幕的坐标

e.pageX / e.pageY
获取文档的坐标（包含滚动条）

键盘事件：keydown、keyup、keypress

document.onkeydown = function(e){
console.log(e.keyCode)
}
键盘上每一个键都有一个唯一的编码，用来识别当前用户正在操作的是键盘上哪一个键

有兼容问题
e.keyCode || e.which

特殊键码：是否按下alt ctrl 和 shift
e.altKey

e.ctrlKey

e.shiftKey

返回值是布尔值；

可以用来判断组合键

if（e.keyCode==13&&e.altKey）{
alert(‘同时按下了enter和alt’)；
}

默认行为（浏览器）

有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。

但是，有些时候我们是不需要默认事件的，所以就需要阻止默认事件

return false；

if(e.preventDefault) {
   e.preventDefault();
}else {
    window.event.returnValue = false;    
    //return false;
}

1、右键菜单（上下文菜单） oncontextmenu
2、表单提交事件 onsubmit

事件流

子元素的事件被触发时，父级也会被触发（冒泡）
一个完整事件流包含 捕获阶段 —> 目标阶段 —>冒泡阶段