事件

作者: DeeJay_Y | 来源:发表于2017-08-18 00:20 被阅读1次

JavaScript事件01——事件流
事件对象，事件监听，事件冒泡，事件代理
事件总结
Javascript事件系统
Javascript事件-事件冒泡，事件捕获，事件监听和事件委托
【事件】事件流
【事件】事件对象
【事件】事件类型
2018-09-10JQuery高级应用
JS事件

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

JavaScript事件01——事件流
大纲：概念（事件、事件流）事件流模型（事件冒泡、事件捕获、DOM事件流）一、概念： 1、事件：事件就是用户或浏览...
事件对象，事件监听，事件冒泡，事件代理
一、事件对象二、冒泡事件：（事件从子元素往父级元素向上触发事件）处理兼容问题：主流浏览器：e.stopPropa...
事件总结
DOM事件主要内容事件流事件注册事件对象事件分类事件代理什么是DOM事件? 事件是某个行为或者触发，比...
Javascript事件系统
本文内容事件基础事件监听方式事件默认行为事件冒泡与事件捕获事件绑定与事件委托事件基础注意：本文不会深...
Javascript事件-事件冒泡，事件捕获，事件监听和事件委托
事件处理机制（一）DOM事件流 DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML...
【事件】事件流
1、JavaScript和HTML之间的交互通过事件实现的。2、事件流描述的是从页面中接收事件的顺序。3、IE 和...
【事件】事件对象
触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的额信息。（包括导致事件的元...
【事件】事件类型
DOM3 级事件规定了以下几类事件： UI（User Interface，用户界面）事件，当用户与页面上的元素交互...
2018-09-10JQuery高级应用
JQuery事件 window事件鼠标事件键盘事件表单事件事件注册语法$(对象).type(fn)type...
JS事件
?事件的相关术语事件类型：鼠标事件、键盘事件事件名称： click、dbclick等事件目标：表示与发生事件...

事件

事件流

事件处理程序

关于this和事件的区别

事件兼容，IE兼容

事件代理

常见事件用法

相关文章

JavaScript事件01——事件流

事件对象，事件监听，事件冒泡，事件代理

事件总结

Javascript事件系统

Javascript事件-事件冒泡，事件捕获，事件监听和事件委托

【事件】事件流

【事件】事件对象

【事件】事件类型

2018-09-10JQuery高级应用

JS事件

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端相关