事件

2017-08-18 本文已影响1人 DeeJay_Y

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

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

事件流

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

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div>Click me!</div>

</body>
</html>

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

1.png

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style>
    .container {
        width: 200px;
        height: 200px;
        border: 1px solid;
    }
    .box {
        width: 100px;
        height: 100px;
        background: #8ffe98;
    }
</style>
<div class="container">
    <div class="box">
        <button>Click me!</button>
    </div>
</div>
<script>
//    document.body.addEventListener('click',function () {
//        console.log('body clicked');
//    });
//    document.querySelector('.container').addEventListener('click',function () {
//        console.log('container clicked;')
//    })
//    document.querySelector('.box').addEventListener('click',function () {
//        console.log('box clicked;')
//    })
//    document.querySelector('.box button').addEventListener('click',function () {
//        console.log('button clicked;')
//    })
//    点击button时输出结果依次为：
//    button clicked;
//    box clicked;
//    container clicked;
//    body clicked
//    这是因为addEventListener的第三个参数默认是false，即忽略事件捕获阶段，从事件冒泡阶段开始

    document.body.addEventListener('click',function () {
        console.log('body clicked');
    },true);
    document.querySelector('.container').addEventListener('click',function () {
        console.log('container clicked;')
    },true)
    document.querySelector('.box').addEventListener('click',function () {
        console.log('box clicked;')
    },true)
    document.querySelector('.box button').addEventListener('click',function () {
        console.log('button clicked;')
    },true)
//    当设置了属性为true的时候，忽略了事件的冒泡阶段，此时输出结果就为：
//    body clicked
//    container clicked;
//    box clicked;
//    button clicked;
    
</script>
</body>
</html>

事件处理程序

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

HTML内联方式：
元素支持的每个事件都可以使用一个相应事件处理程序同名的HTML属性指定。这个值的属性是可执行的JS代码，我们可以为button添加click事件处理程序。
<input type="button" value="click me!" onclick="alert('clicked!');">
JavaScript指定事件处理程序
通过JS指定事件处理程序就是吧一个方法赋值给一个元素的事件处理程序。

<input type="button" value="click me!">
<script>
    var btn = document.querySelector('input');
    btn.onclick = function () {
        alert('clicked!');
    }
</script>

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

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

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

<input type="button" value="click me!">
<script>
    var btn = document.querySelector('input');
    btn.addEventListener('click',function() {
        alert('clicked!!!');
    });
</script>

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

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

<input type="button" value="click me!">
<script>
    var btn = document.querySelector('input');

    var handler = function () {
        alert('clicked!!');
    }
//    function handler () {
//        alert('c');
//    }
    btn.addEventListener('click',handler);


    //要移除click事件，可以这么写
    btn.removeEventListener('click',handler);
</script>

关于this和事件的区别

   <body>

    <div class="box">
        <button>click me</button>
    </div>

    <script>
        var btn = document.querySelector('button');
        var box = document.querySelector('.box');
        btn.addEventListener('click',function (e) {
            console.log(this); //<button>click me</button>
            console.log(this.innerText);//click me
            console.log(e);//MouseEvent {isTrusted: true, screenX: 40, screenY: 80, clientX: 40, clientY: 14, …}
            console.log(e.target); // <button>click me</button>
        });

        box.addEventListener('click',function (e) {
            console.log(this); //<div class="box"><button>click me</button></div>
            console.log(this.innerText);//click me
            console.log(e);//MouseEvent {isTrusted: true, screenX: 40, screenY: 80, clientX: 40, clientY: 14, …}
            console.log(e.target); //<button>click me</button>
           //这时候的this和e.target就不一样了，this表示谁监听到的就是谁，e.target事件真实的原始触发点，即事件最终到达的元素
        });
    </script>
</body>

事件兼容，IE兼容

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

<body>

    <div class="box">
        <button id="btn">click me</button>
    </div>

    <script>
        var btn = document.querySelector('#btn');
        var box = document.querySelector('.box');
        var handler = function () {
            console.log(this.id);  //undefined
        }
        btn.attachEvent('onclick',handler); // 注意是onclick，attachEvent没有第三个参数,因为IE只支持事件冒泡
    </script>
</body>

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();//阻止了事件的继续冒泡
        })

取消默认事件

          <a href="http://www.baidu.com">link</a>

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

事件代理

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<style>
    .container {
        margin: 30px auto;
        width: 900px;
    }
    ul,li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .container li {
        border: 1px solid #cccccc;
        line-height: 1.5;
    }
    #show {
        background: #cccccc;
    }
</style>
    <div class="container">
        <ul>
            <li>aa</li>
            <li>bb</li>
            <li>cc</li>
            <li>dd</li>
        </ul>
        <input type="text" id="add-ipt"><button id="btn">添加</button>
        <div id="show"></div>
    </div>
</body>
<script>
    var liNodes = document.querySelectorAll('.container ul li');
    var show = document.querySelector('#show');
    var add = document.querySelector('#btn');
    var ul = document.querySelector('ul');
    var container = document.querySelector('.container');
    var addIpt = document.querySelector('#add-ipt');


//    liNodes.forEach(function (node) {
//        node.addEventListener('click',function () {
//            console.log(node);
//            show.innerText = this.innerText;
//        })
//    })
//    add.addEventListener('click',function() {
//        var text = document.createElement('li');
//        text.innerText = addIpt.value;
//        ul.appendChild(text);
//        text.addEventListener('click',function () {//新增的节点没有绑定事件，点击不会展示在show里，所以需要另行绑定\
//            show.innerText = this.innerText;   //但是这样代码很不合理，可以使用事件代理
//        })
//    })


//    事件代理的写法
//    不是给每个节点绑定事件，而是给其父元素绑定事件，不用this而是用target，这样新建的节点也能使用target
    ul.addEventListener('click',function (e) {
        var target = e.target; // 不用this而使用target
//        存在问题，点ul不点li会直接出现所有ul的内容
//        所以进行判断，是否是点击到了li上
        if (target.tagName.toLowerCase() === 'li') {
            show.innerText = target.innerText;
        }
    })
    add.addEventListener('click',function () {
        var text = document.createElement('li');
        text.innerText = addIpt.value;
        ul.appendChild(text);
    })


</script>
</html>

常见事件用法

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

事件

事件流

事件处理程序

关于this和事件的区别

事件兼容，IE兼容

事件代理

常见事件用法

猜你喜欢

热点阅读