事件

JS和HTML的交互是通过事件来实现的。JS采用异步事件驱动编程模型，当文档，浏览器，元素或者与之相关的对象发生特定事情时，浏览器会产生事件。如果JS关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄

• 事件是某个行为或者触发，比如点击，鼠标移动。
• 当用户点击鼠标时
• 当网页已经加载时
• 当图像已经加载时
• 当鼠标移动到元素上时
• 当用户触发按键时

事件流

事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？
目前主要有3种模型：
1，IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。
2，Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和时间冒泡相反
3，DOM事件流：DOM2级事件规定事件流包括三个阶段，事件部或阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是目标接收事件，最后是冒泡阶段。
这种分歧是很常见的，举例来说，某个地方出现了抢劫事件，我们有多种处理方式：
1，村里先发现，报告给乡里，乡里报告给县城，县城报告给市里。。
2，市里先知道这个事件，然后交代给县城怎么处理，县城交代给乡里处理，乡里交给村里处理。。。

Opera，Firefox，Chrome，Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡。
举例说明：

    
    
    
    



    
Click me!

对于如上结构，点击div区域有：

1.png

• 事件捕获和事件冒泡的理解举例：

    
    
    
    




    

        Click me!
    

事件处理程序

事件侦听者（listener），事件就是用户或浏览器自身执行的某种动作。比如click，load，mouseover等，都是事件类型（俗称事件名称），而响应某个事件的方法就叫做事件处理程序或者事件监听器
也就是我们需要提前定义好某些事件发生了该怎么处理，这个过程叫做绑定事件处理程序。
给元素添加事件处理程序的方法：

• HTML内联方式：
  元素支持的每个事件都可以使用一个相应事件处理程序同名的HTML属性指定。这个值的属性是可执行的JS代码，我们可以为button添加click事件处理程序。
  

• JavaScript指定事件处理程序
  通过JS指定事件处理程序就是吧一个方法赋值给一个元素的事件处理程序。

这样处理，事件处理程序被认为是元素的方法，事件处理程序在元素的作用域下运行，this就是当前元素。
这样删除事件处理程序时，只需要设置onclick属性为null

• DOM2事件处理程序
  DOM2级事件定义了两个方法用于处理指定和删除事件处理程序的操作：

1. addEventListener
2. removeEventListener
   所有的DOM节点都包含这两个方法，并且他们都接收3个参数：
   1,事件类型
   2,事件处理方法
   3，布尔参数，如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理，默认为false
   所以针对刚才的例子，还可以写为：

使用addEventListener的好处是可以为事件添加多个程序，因为本质上只是元素在调用函数，可以多次调用，每次传入不同的参数。而JS方法实现的话本质上是给元素的属性赋值，不能添加多个事件处理程序，后面赋值的属性会覆盖前面的。

要移除事件处理程序可以使用removeEventListener,移除时参数与添加的时候相同，这就意味着刚才我们添加的匿名函数无法移除，因为匿名函数虽然方法体一样，但是句柄不相同，所以当我们有移除事件处理程序的时候可以这样写：

关于this和事件的区别

   

    

        click me
    

    

事件兼容，IE兼容

老IE不支持addEventListener()和removeEventListener()，但是有两个类似的方法：
1,attachEvent
2,detachEvent
这两方法都接收2个相同的参数
1，事件处理程序名称
2，事件处理程序方法
由于IE只支持时间冒泡，所以添加的程序会被添加到冒泡阶段，使用attachEvent添加事件处理程序可以如下：

    

        click me
    

    

• attachEvent()和addEventListener()的区别
  1，参数个数不相同，IE只支持事件冒泡，所以attachEvent只有两个参数。
  2，第一个参数意义不同addEventListener()第一个参数是事件类型（比如click,load）,而attachEvent()的第一个参数指明的是事件处理函数名称（onclick，onload）
  3，事件处理程序的作用域不同，addEventListener()的作用域是元素本身，this指的是触发元素，而attachEvent()事件处理程序会在全局变量内运行，this是window，所以刚才例子会返回undefined，而不是元素id
  4，为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener()添加会按照顺序执行，而attachEvent()添加多个事件处理程序时无规律（添加的多了的话），所以添加多个的时候，如果依赖函数执行顺序，需要自己处理。

• 取消事件冒泡 e.stopPropagation()

        var btn = document.querySelector('#btn');
        var box = document.querySelector('.box');
        box.addEventListener('click',function (e) {
            e.stopPropagation();//阻止了事件的继续冒泡
        })

• 取消默认事件

          link

          var link = document.querySelector('a');
           link.addEventListener('click',function(e) {
            e.preventDefault(); // 阻止了默认的跳转
        })

事件代理

创建了新节点，不需要另外重复绑定事件，给父节点绑定事件，使用target而不是this来获取点击节点。 还要注意点击到父节点而没有点击到目标节点的情况。

    
    
    
    



    

        

            
aa
            
bb
            
cc
            
dd
        
        添加
        

    

常见事件用法

mouseover和mouseenter的区别：

• 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
• 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

    function $(id) {
        return document.querySelector(id);
    }
    function $$(className) {
        return document.querySelectorAll(className);
    }
//  常见事件
//  click dbclick
    $('#btn').addEventListener('click',function () {
        console.log(this);
    })
    $('#btn1').addEventListener('dbclick',function () {
        console.log(this);
    })
//  mouseover mouseout
    $('#ct').addEventListener('mouseover',function () { //mouseover如果里面还有子元素，每次碰到子元素再回来就会再触发一次
        console.log(1);
        window.node = this; //由于是回调函数，提前this存起来便于输出
        console.log(node); // this仍然代表这个容器
        this.classList.add('hover'); //要改变样式，可以css里面写个样式应用
    })
    $('#ct').addEventListener('mouseover',function () { //和mouseover相对的是mouseout
        console.log(2);
        window.node = this;
        console.log(node);
        this.classList.remove('hover'); //鼠标离开时，去除样式
    })
//    mouseenter   mouseleave
//    一般使用mouseenter   mouseleave而不是使用mouseover mouseout
    $('#ct').addEventListener('mouseenter',function () {
        console.log(3);
        window.node = this;
        console.log(node);
        this.classList.add('hover');
    })
    $('#ct').addEventListener('mouseleave',function () {
        console.log(4);
        window.node = this;
        console.log(node);
        this.classList.remove('hover');
    })
//    input获取焦点focus和失去焦点blur,keyup,change
    $('#input-name').addEventListener('focus',function () {
        console.log(1);
        console.log(this.value);
    })
    $('#input-name').addEventListener('blur',function () {
        console.log(2);
        console.log(this.value);
    })
    $('#input-name').addEventListener('keyup',function () { //键盘松开
        console.log(this.value);
        this.value = this.value.toUpperCase();
    })
    $('#input-name').addEventListener('change',function () { //里面内容发生改变时，可以看做是一个blur加上一个判断是否改变的事件
        console.log(this.value);
        this.value = this.value.toUpperCase();
    })
//    form的表单提交验证
    $('#form').addEventListener('submit',function (e) {
        e.preventDefault();//阻止默认提交
        if (/\w{6,20}$/.test($('#username').value)) {
            $('#form').submit(); //验证成功后提交
        }
        else {
            $('.msg').innerText = '出错了';
            $('.msg').style.display = 'block';
            console.log('No Submit');
        }
    })
//    scroll
    window.addEventListener('scroll',function (e) { //其实稍微滚动一下就会执行很多次
        console.log(1);
    })
//    load