javascript事件学习笔记

事件：用户在网页中的行为跟代码逻辑交互

三要素：

事件源：用户跟代码交互使用的标签

时间类型：行为的类型

事件处理程序：函数代码

事件语法：事件源.on类型 = function(){}

事件类型

鼠标类

click单击

dblclick双击

contextmenu右击

mousedowna按下鼠标任意键都可以触发

mouseover / mouseenter鼠标移入

mouseout / mouseleave鼠标移出

mousemove鼠标移动

mousewheel滚轮滚动

键盘类型

keydown键盘按住不松开——只要不松开就一直触发

keyup松开时触发一次

keypress键盘按住不松开——只要不松开就一直触发

表单类型

focus获取焦点

blur失去焦点

change下拉框选项改变，单选框被选中，复选框选中状态发生改变，文本框内容改变且失去焦点

单选框和复选框都可以通过checked判断是否被选中

submit点击提交按钮时触发

input文本框内容发生改变就会触发

---

事件流

事件流：  事件从开始触发到执行结束的过程

事件流分为三个阶段

1.捕获阶段：找目标元素的过程。

2.目标阶段：找到目标元素，执行他的事件

3.冒泡阶段：从小到大离开目标元素的过程        默认非目标元素的事件是冒泡阶段执行的

---

另一种事件绑定方式-用一个函数绑定

语法：标签.addEventListener(不要on的事件类型，要执行函数，当前事件在别人的事件流中是否在捕获阶段执行）

同类型的事件可以绑定多次

---

事件的解绑

什么是解绑？

事件绑定：标签+时间类型+事件处理函数

删除这个事件就是解绑

为什么要解绑？

1.内存浪费，事件执行一次后就不需要时，他不会自动取消，一直占用内存

2.在某些场景中，事件必须取消，否则会出问题，例如拖拽，如果不取消移动事件，就会一直移动

怎么解绑？

绑定方式不一样，解绑方式也是不一样的

通过标签.on类型绑定的事件怎么取消        标签.on类型 = null

通过事件监听器绑定的对应的解绑方法

语法：标签.removeEventListener(事件类型，要解绑的那个函数）

绑定事件使用匿名函数就解绑不掉了

---

事件对象

事件对象：当我们触发了事件，调用设置好的事件函数（浏览器调用这个函数）系统为了方便我们控制事件，在调用函数的时候给我们传递了一个参数，浏览器传递进来的参数是一个对象-事件对象

事件对象的获取

document.onclick = function(e){
    console.log(e)
}

这个事件对象在低版本ie是不兼容的

在低版本ie浏览器中，我们需要通过-window.event来获取事件对象

console.log( window.event );

以前的兼容写法

 var e = e || window.event
 console.log(e);

现代的兼容写法

console.log( window.event );

---

阻止事件冒泡

事件流：捕获-目标-冒泡（非目标元素的事件会默认在冒泡阶段执行）

将冒泡的行为取消掉——阻止冒泡

利用事件对象来阻止其他标签的事件冒泡，在事件对象中有一个方法叫stopPropagation专门用来阻止事件冒泡

在低版本ie浏览器中 用事件对象.cancelBubble = true来阻止

以前的兼容写法

 if(window.event.stopPropagation) {
        window.event.stopPropagation()
    } else {
         window.event.cancelBubble = true
     }

现代的兼容写法

window.event.cancelBubble = true

mouseover默认会冒泡        mousemove不会冒泡

---

阻止默认行为

默认行为：有些标签，不用给他绑定事件，有默认的行为，比如a/form/鼠标右击/选中文字...

利用事件对象阻止鼠标默认行为

事件对象.preventDefault()

这个方法在低版本ie浏览器不兼容

.returnValue = false

 以前的兼容写法

 try{
     e.preventDefault()
 }catch(err) {
    e.returnValue = false
 }

现代兼容写法

 e.returnValue = false

另外的阻止默认行为——在行内阻止        将链接改为javascript:;或javascript:void(0);

---

获取鼠标按键码

事件对象.button获取鼠标案件码        0表示左键1 / 表示中键 / 2表示右键

获取当前的事件类型        事件对象.type记录当前事件类型

---

获取键盘按键码

事件对象.keyCode获取键盘按键码

字母和数字对应的按键码就是阿斯克码，大小写混乱

将阿斯克码转化为字符String.fromCharCode(阿斯克码)

回车键13

空格32

左37

上38

右39

下40

事件对象.shiftkey        事件对象.ctrlkey        事件对象.altkey

用来判断这个键是否在和其他键组合使用，当组合使用时得到的结果为true，单个使用得到的结果为false

---

获取鼠标位置

事件对象.offsetX   事件对象.offsetY - 获取鼠标在当前事件源上的位置

事件对象.clientX   事件对象.clientY - 获取鼠标在当前浏览器窗口范围内的位置

事件对象.pageX   事件对象.pageY - 获取鼠标在整个网页中的绝对位置

---

事件委托

事件委托：多个字标签都需要事件的时候，就让他父标签去绑定处理

在父标签的时间中，可以通过事件对象获取到精准的目标元素（事件对象.target）

事件委托的好处：

1.提高了绑定效率

2.动态添加的字标签也能具有事件