DOM BOM 事件 - Events - 《土衣的Javascript学习笔记》

事件绑定
事件处理程序的运行环境
解除事件处理程序
事件处理模型冒泡捕获
事件对象
- 事件源对象
- 事件委托
事件分类

事件绑定

ele.onxxx = function (event) {} //句柄的绑定方式
例 div.onclick = function(){}
div.onclicck 就叫做可以被点击的事件（绑定事件类型），function(){}是反馈，一旦事件被触发，就要执行 function 里面的函数（绑定的是一个事件处理函数）

ele.addEventListener(type, fn, false); //里面可以填三个参数
//IE9 以下不兼容，可以为一个事件绑定多个处理程序
//div.addEventListener（’事件类型’，处理函数，false）div.addEventListener（‘click’，function(){}，false）

//不会覆盖，是一个队列 on会后面覆盖前面的
function f1(){
    console.log(1)
}
function f2(){
    console.log(2)
}
images.addEventListener('click',f1)
images.addEventListener('click',f2)
images.removeEventListener('click',f1)
//1
//2

尽量使用**addEventListener**，而不是**on**

ele.attachEvent(‘on’ + type, fn);
IE 独有，一个事件同样可以绑定多个处理程序，同一个函数绑定多次都可以
例 div.attachEvent(‘on’ + 事件类型，处理函数);
div.attachEvent(‘onclick’ ，function（）{});

事件处理程序的运行环境

程序 this 指向是 dom 元素本身（指向自己）

解除事件处理程序

1、ele.onclick = false/‘’/null; ==> 解除 ele.onxxx = function (event) {}
2、ele.removeEventListener(type, fn, false);==>解除 addEventListener(type, fn, false)
3、ele.detachEvent(‘on’ + type, fn); ==> obj.attachEvent(‘on’ + type, fn);

事件处理模型冒泡捕获

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            border: 1px solid;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="grand1">
        爷爷
        <div id="parent1">
            爸爸
            <div id="child1">
                儿子
            </div>
        </div>
    </div>
    <script>
        grand1.addEventListener('click',()=>{
            console.log("爷爷")
        },true)
        parent1.addEventListener('click',()=>{
            console.log("爸爸")
        })
        child1.addEventListener('click',()=>{
            console.log("儿子")
        })
        //爷爷 儿子 爸爸
        //默认从内到外执行 儿子 爸爸 爷爷  冒泡
        //addEventListener第3个参数可以传true,就先执行外面的 爷爷 爸爸 儿子  捕获
        //先捕获再冒泡
        //如果自身既有冒泡也有捕获，按代码顺序
    </script>
</body>
</html>

冒泡

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
结构上存在父子关系的元素，如果点击到子元素，会一级级向父元素传递这个事件（从代码的角度是自底向上一层层冒泡的）

捕获

1）结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自底向上）
2）IE 没有捕获事件
一个对象的一个事件类型，只能存在一个事件处理模型（冒泡或捕获）
obj.addEventListener(type, fn, true);第三个参数为 true 就是事件捕获

顺序

取消冒泡和阻止默认事件

取消冒泡

1）W3C 标准 event.stopPropagation();但不支持 ie9 以下版本

2）IE 独有 event.cancelBubble = true;【实际上谷歌也实现了】

3）封装取消冒泡的函数 stopBubble(event)

阻止默认事件

1）默认事件 — 表单提交，a 标签跳转，右键菜单等

事件对象

非 ie 浏览器会把事件对象（记载了数据发生时的状态和信息）打包传到参数里面去。
ie 浏览器在 window.event 里面储存事件对象

事件源对象

event.target 火狐独有的
event.srcElement Ie 独有的
这俩 chrome 都有

事件委托

事件分类

鼠标事件（不需要小驼峰和大驼峰）

click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、mouseenter、 mouseleave

用 button 来区分鼠标的按键，0/1/2

DOM3 标准规定:click 事件只能监听左键,只能通过 mousedown 和 mouseup 来判断鼠标所有键

如何解决 mousedown 和 click 的冲突

移动端 onmousedown 不能用，只能用 touchstart,touchmove,touchend

键盘事件

1、keydown，keyup，keypress
2、触发顺序是 keydown > keypress > keyup，keypress不同于onclick，和keydown，keyup没关系
3、keydown 和 keypress 的区别
1）keydown 可以响应任意键盘按键，keypress 只可以相应字符类键盘按键
keydown 检测字符类不准确，keypress 检测字符很准。但是 keydown 能监控所有，包括上下左右都能监控，但是 keypress 只能监视字符
用法：如果你想监控字符类按键，并想区分大小写，就用 keypress，如果是操作类按键的话，就用 keydown（which：39 是给按键牌号 39，不是 asc 码）

文本操作事件

input，change，focus，blur

框里面所有变化（增删改）都会触发 input 事件
change 对比鼠标聚焦，或失去焦点的时，两个状态是否发生改变，如果两个状态没有改变就不触发，如果发生改变就触发
focus，blur 聚焦和失去焦点

窗体操作类(window 上的事件)

scroll，load
scroll 当滚动条一滚动，scroll 事件就触发了

load 重要但是不用

Events