谈谈JavaScript事件

何为‘事件’

用户在网页中的行为叫做事件

学习事件的目的：希望能自定义的让用户在网页中进行某种行为之后，去执行写好一段代码

语法：

1.事件源.on事件类型=function() {}

2.行内绑定： <标签 on事件类型="一行js代码或函数调用"> </标签>

3.事件源.addEventListener('事件类型',function() {})

注意：事件源指的是触发事件的时候使用哪个标签，记得先获取标签

事件类型

事件类型指的是用户在进行那种行为

事件类型主要分为四大类：鼠标类，键盘类，表单类，window类

一，鼠标类

单击---click

双击---dbclick

移入---mouseover/mouseenter

移出---mouseout/mouseleave

鼠标按下---mousedown

鼠标松开---mouseup

鼠标移动---mousemove

滚轮滚动---mousewheel

鼠标右击---contextmenu

二键盘类

键盘按下---keydown----不松开就会一直触发

键盘抬起---keyup----使用很频繁

敲击键盘---keypress

三、表单类

获得焦点---focus

失去焦点---blur

下拉框选项发生改变事件--change

表单提交---submit

注意：必须给form标签绑定；

提交事件再什么时候才触发?

答：当表单域中的提交按钮（input的type为submit，或button的type为submit)被点击后或敲回车后触发）

input事件---- 实时监听文本框或文本域中内容的事件

四、window类

加载事件--load--当页面中所有的资源都有加载完成后，才会触发

滚动条滚动事件--scroll-当滚动条滚动了就会触发；

窗口大小改变的事件--resize--当浏览器的大小改变就会触发

主要事项

mouseover() 与 mouseenter() 之间的不同（先执行mouseover后mouseenter）

mouseover 事件在鼠标移动到选取的元素及其子元素上时触发。
mouseenter 事件只在鼠标移动到选取的元素上时触发。

mouseover/mouseout事件支持冒泡，绑定的事件会冒泡到子标签上。
mouseenter/mouseleave事件则只针对所绑定的标签，不会冒泡到子标签上。

（mouseover在进入到子元素也会执行，而mouseenter 只会执行绑定的元素，进入子元素不执行）

mouseover可以看到进入父集元素，进入到子集时、离开子集进入父级，一共三次

而mouseout只有进父级时一次

事件流

每个事件发生的时候，都会有一个触发并执行的过程，也就是事件的传播过程，我们称之为事件流。

简单来说，事件流就是事件从发生到执行结束的流程。

事件流包含3个阶段：捕获阶段、目标阶段、冒泡阶段

事件捕获阶段：事件开始由顶层元素触发，然后逐级向下传播，直到目标元素，依次执行其身上绑定的事件。

事件目标阶段(处理阶段)：触发当前自身的事件。

事件冒泡阶段：事件由目标元素先接收，然后逐级向上传播，达到最顶层元素，依次执行其身上绑定的事件。

事件执行的流程是先捕获阶段--->再目标元素阶段---->最后冒泡阶段。

目标元素的事件是在目标阶段执行，其他事件会在冒泡阶段执行。每个事件只会执行一次，也就是说如果在冒泡阶段执行了事件，就不会在捕获阶段执行。

事件的绑定方式

第一种：标签.on事件类型=function() {}

第二种就是事件监听器

标签.adddEventListener（'事件类型'，函数，布尔值-是否在捕获阶段执行）

布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

例：

事件监听器的好处有两点：1.可以让事件在捕获阶段执行 2 .同类型的事件可以绑定多次并且不覆盖

事件的解绑

因为事件绑定就是在内存存储事件，但事件执行完后不需要此事件了，这时就需要解绑

解绑的方式可以根据绑定的方式：

1，标签.on类型=null

例

var btn = document.querySelector('button')
// console.dir(btn);

 btn.onclick = function() {
    console.log(111);
     // delete this.onclick // 删除对象的onclick属性

   this.onclick = null
//     console.dir(this);

2.标签.addEventListenter()类型的话就得用标签.removeEventListener()

例：

  btn.addEventListener('click', function () {
        console.log('nihao')
    })

注意点

总结：
1.绑定事件的本质是在干什么？将事件类型赋值为一个函数，存到内存中
2.为什么要解绑？有些事件在执行结束后不要了
3.怎么解绑？
根据绑定方式不同，解绑方式也是不同的：
1.如果使用标签.on类型绑定的，给标签.on类型 = null
2.如果使用事件侦听器绑定的，就使用标签.removeEventListener(事件类型, 对应函数)
如果绑定的函数是匿名函数，这个事件是解绑不了的

事件对象

概念：事件对象是一个系统提供的用来记录事件相关相关信息的对象

获取：在事件中window.event !!注意点：每个事件的事件对象都是不同的所以必须要在事件函数中获取事件对象

事件对象的作用

1.获取事件类型：事件对象.type

例：

  btn.addEventListener('click', function () {

        var e = window.event;

        console.log(e.type)//click

        console.log('nihao')

    })

2.获取鼠标按键信息：事件对象.button

（事件对象.button 代表当前鼠标按键信息：0左键 1滚轮 2右键）

 window.onmousedown = function () {
        var e = window.event;
        console.log(e.button)
    }

3.防止事件冒泡：事件对象.cancelBubble=true

4.获取键盘按键的信息按键码

按键码：事件对象.keyCode

数字和字母的按键码是阿斯克码

回车键码是13；空格码是32；左上右下的键码分别是：37,38,39,40；

注意点：

在低版本火狐中使用事件对象.which来获取按键码

所以在处理兼容的时候可以 var keycode = e.keyCode || e.which

来处理兼容问题

组合键：

事件对象.ctrlKey

事件对象.altKey

事件对象.shiftKey

注意点：输出的值都是布尔值，代表是否按住相对应的键

5.获取鼠标位置；

相对于事件源：事件对象.offsetX;事件对象.offsetY

相对于浏览器窗口：事件对象.clientX;事件对象.clientY;

相对于整个页面：事件对象.pageX;事件对象.pageY;

var box = document.querySelector('.box');
// box.onclick = function() {
//     var e = window.event;
//     // 1.获取鼠标在当前事件源上点击的位置
//     // 事件对象.offsetX 事件对象.offsetY
//     var x1 = e.offsetX
//     var y1 = e.offsetY
//     // console.log(x1, y1);

//     // 2.获取鼠标在当前浏览器区域中的位置
//     // 事件对象.clientX 事件对象.clientY
//     var x2 = e.clientX
//     var y2 = e.clientY
//     // console.log(x2, y2);

//     // 3.获取鼠标在当前页面中的位置
//     // 事件对象.pageX 事件对象.pageY
//     var x3 = e.pageX
//     var y3 = e.pageY
//     console.log(x3, y3);
// }

6.阻止默认行为；

1.事件对象.returnValue=false;

2.在事件函数最下面添加return false；

3如果有链接的话，就将连接改成：JavaScript:;

 // 默认行为：自带的功能
    // 有些标签不需要使用js事件操作，自动就能实现某些功能，例如a标签、form、鼠标右击

    // 阻止默认行为
    var a = document.querySelector('a');
    a.onclick = function () {
        // 利用事件对象，阻止默认行为
        var e = window.event;
        // 1.阻止默认行为 - 事件对象.returnValue = false
        e.returnValue = false
        console.log(11);
        // 2.在事件函数的末尾，添加  return false
        // return false
    }

7.获取具体的更加精准的目标元素：事件对象.target

到这里，那什么事件委托呢

事件委托：利用事件冒泡原理，让父标签代替子标签处理事件

事件委托怎么做？给父标签绑定事件，在父标签事件中，通过事件对象.target获取到当前触发事件的目标子标签，处理这个行为、

好处：

1.提高绑定的效率

2.动态添加的子标签也能具备事件

例
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
这里有三个li标签，我们现在要给每个li都绑定一个点击事件那么就是通过遍历lis给每个li都绑定一个点击事件，
var lis = document.querySelectorAll('li');
 for(var i=0; i<lis.length;i ++) {
     lis[i].onclick = function() {
         console.log(this.innerText);
     }
 }
在这是我们就可以用上事件委托来处理这个要求；

我们在点击li的同时其实就是在点击ul；所以个ul绑定上点击事件就好
var ul = document.querySelector('ul');
ul.onclick = function() {
    // console.log('哈哈');
    // 如何在父标签的事件中找到当前正在点击的子标签
    // 事件对象中有一个属性 target，可以获取到当前点击的更加精准的目标元素
    console.log( window.event.target.innerText );
}