JavaScript事件相关基础 - 《JavaScript学习》

事件基础
- 三要素
注册事件
- 传统方式
- 方法监听注册方式
删除事件
DOM事件流基础
事件对象
鼠标の事件（部分）
键盘事件

事件基础

事件是可以被js侦测到的行为

触发—相应机制

三要素

事件源：事件被触发的对象

事件类型：如何触发

事件处理程序：通过函数赋值完成

注册事件

给元素添加事件—注册事件、绑定事件

传统方式

利用on开头的事件，onclick等
btn.onclick = function(){}

特点：唯一性

同一个元素的同一事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数

方法监听注册方式

addEventListener() ie9以前不支持

特点：同一个元素同一个事件可添加多个监听器(事件处理程序)

eventTarget.addEventListener(type,listener,useCapture)；

type：事件类型字符串，click、mouseover
listener：事件处理函数，事件发生时。会调用该监听函数
useCapture：可选参数。bool值

attachEvent() —了解

attachEvent(eventNameWithOn,callback)

eventNameWithOn :事件类型字符串，onclick等（加on）
callback：事件处理函数，当目标触发事件回调函数时被调用

删除事件

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick =function() {
            alert('hi');
            divs[0].onclick = null; //解绑效果
        }
        divs[1].addEventListener('click',fn)
        function fn() {
            alert('hello');
            divs[1].removeEventListener('click',fn);
        }
        //因为要解绑，因此要把函数写道注册事件的外面,单独声明一个函数
        divs[2].attachEvent('onclick',fn1);
        function fn1() {
            alert('hello world!');
            divs[2].detach('onclick',fn2);
        }
    </script>
</body>

DOM事件流基础

事件流：描述的是从页面接收事件的顺序

事件发生时会在元素节点间按照特定的顺序传播，这个传播过程即为DOM事件流

阶段：捕获阶段—DOM事件流（目标阶段）—冒泡阶段

事件捕获：IE最早提出，时间开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层结点的过程
事件冒泡：网景最早提出，由DOM最顶层的结点，逐级向下传播到具体的元素接收的过程

js代码只能执行捕获或者冒泡其中一个阶段
只有onclick和attachEvent得到冒泡阶段
attachEventListener第三个参数如果是true，则说明在事件捕获阶段调用事件处理程序，如果是false；则表示在事件冒泡阶段调用事件处理程序
实际开发中更关注冒泡
有些事件没有冒泡，onblur、onfocus、onmouseenter、onmouseleave

事件对象

event就是一个事件对象，写到侦听函数的小括号里，当成形参来看
事件对象只有有了事件才会存在，是系统给我们自动创建的，不需要传递参数，并依次传递给事件监听器（事件处理函数）
事件对象是事件一系列相关信息数据的集合，跟事件相关的，比如鼠标点击里面就包含鼠标的相关信息，如鼠标坐标等
事件对象可以自己明明，event、eve、e
事件对象也有兼容性问题，ie678只能通过window.event获取e==e || window.event

事件对象常见的属性和方法

this 返回的是绑定事件的对象（元素）
e.target \ e.srcElement 返回的是触发事件的元素（对象）

currentTarget 与 this 相似，但有兼容性问题

阻止默认行为（事件）

e.preventDeafult() —dom标准写法

return false 可以阻止默认行为，没有兼容性问题

特点:return 后面的代码都不执行了，且仅限于传统的注册方式

阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层结点

e.stopPropagation()

e.cancelBubble = true;

事件委托（委派）

for循环给每个事件注册相同的事件，访问DOM次数月u都，就会延长整个页面交互的就绪时间

原理：不是给每个子结点单独设置事件监听器，而是事件监听器设置在其父结点上，然后利用冒泡原理影响每一个子节点

只操作一次DOM，提高程序性能

鼠标の事件（部分）

MouseEvent

禁止鼠标右键菜单

contextmenu 主要控制应该何时显示上下文菜单，用于取消默认的上下文菜单

document.addEventListener('contextmenu',function(e) {
            e.preventDefault();
        })

禁止鼠标选中

document.addEventListener('selectstart',function(e) {
            e.preventDefault
        })

鼠标事件对象

例子：鼠标跟随图片

这样你就获得一个可以一直跟着你的小图片啦！

    <style>
        img {
            position: absolute;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <img src="./JavaScript_exercise/pic/morning.png" alt="">
    <script>
        let pic =document.querySelector('img');
        document.addEventListener('mousemove',function(e) {
            let x = e.pageX;
            let y = e.pageY;
            pic.style.left = x + 'px';
            pic.style.top = y + 'px';
        })
    </script>
</body>

键盘事件

onkeyup
onkeydown
onkeypress (它不识别功能键，如ctrtl、shift、箭头等)

执行顺序：keydown-keypress-keyup

keyCode 属性可以返回按下键的阿斯克码值

    <script>
        document.addEventListener('keyup',function(e) {
            console.log('press:' + e.keyCode);
        })
    </script>