addeventlistener事件第三个参数_JavaScript之高级事件

1.注册事件的两种方式

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        var btns = document.querySelectorAll('button');
        //1  传统注册事件同一个索引只能实现一个功能；如果写两个函数实现结果，后面一个结果会把前面
//结果覆盖。
        btns[0].onclick = function() {
            alert('11');
        }
        btns[0].onclick = function() {
                alert('22');
            }
            // 2. 事件侦听注册事件 addEventListener 
            // (1) 里面的事件类型是字符串 必定加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
            alert('11');
        })
        btns[1].addEventListener('click', function() {
            alert('22');
        })
    </script>
</body>

2.删除事件（解绑事件）的两种方式

即通过点击按钮，实现弹出框跳出。且该弹出框只跳出一次，后面再点击此按钮时，弹出框不再跳出。

<style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid aqua;
            background-color: azure;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
                alert('11');
                //1  传统方式删除事件
                divs[0].onclick = null;
            }
            //2  rumoveEventListener 删除事件
        divs[1].addEventListener('click', fn); //里面的fn不需要调用加小括号

        function fn() {
            alert('22');
            divs[1].removeEventListener('click', fn);
        }
        // 3  detachEvent    //用于低版本浏览器的兼容性
        divs[2].attachEvent('onclick', fn1);

        function fn1() {
            alert('33333');
            div[2].detachEvent('onclick', fn1);
        }
    </script>

3 DOM事件流

阶段1：事件捕获阶段——》在整个程序中从大到小依次输出所要输出的内容。程序执行顺序是：document-》HTML——》body——》father——》son

阶段2：事件冒泡节点——》在整个程序中从小到大依次输出所要输出的内容。程序执行顺序是：son》father》body>html>document

1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。

3.1 捕获阶段

如果

addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son

<style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true)
    </script>
</body>

3.2. 冒泡阶段

如果

addEventListener 第三个参数是 false 或者省略那么则处于冒泡阶段 son -> father ->body -> html -> document

<style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false)
    </script>
</body>

4 事件对象

eventTarget.onclick = function(event) {}
eventTarget.addEventListener('click', function(event) {}）
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt

事件对象的使用方法：

eventTarget.onclick = function(event) {
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
}
eventTarget.addEventListener('click', function(event) {
// 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt
}）

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

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>123</div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
    <script>
        // 常见事件对象的属性和方法
        // 1. e.target 返回的是触发事件的对象（元素）  this 返回的是绑定事件的对象（元素）
        // 区别 ： e.target 点击了那个元素，就返回那个元素 this 那个元素绑定了这个点击事件，那么就返回谁
        var div = document.querySelector('div');
        div.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);

        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
                // 我们给ul 绑定了事件  那么this 就指向ul  
                console.log(this);
                console.log(e.currentTarget);

                // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li
                console.log(e.target);

            })
            // 了解兼容性
            // div.onclick = function(e) {
            //     e = e || window.event;
            //     var target = e.target || e.srcElement;
            //     console.log(target);

        // }
        // 2. 了解 跟 this 有个非常相似的属性 currentTarget  ie678不认识
    </script>

addeventlistener事件第三个参数_JavaScript之高级事件

<body>
    <div>123</div>
    <a href="http://www.baidu.com" target="_blank" rel="external nofollow" >百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 常见事件对象的属性和方法
        // 1. 返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);

        }
        // 2. 阻止默认行为（事件） 让链接不跳转 或者让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
                e.preventDefault(); //  dom 标准写法
            })
            // 3. 传统的注册方式
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本浏览器 ie678  returnValue  属性
            // e.returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点： return 后面的代码不执行了， 而且只限于传统的注册方式
            return false;
            alert(11);
        }
    </script>
</body>

阻止冒泡

<style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son儿子</div>
    </div>
    <script>
        // 常见事件对象的属性和方法
        // 阻止冒泡  dom 推荐的标准 stopPropagation() 
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // 非标准 cancel 取消 bubble 泡泡
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

addeventlistener事件第三个参数_JavaScript之高级事件

1.注册事件的两种方式

2.删除事件（解绑事件）的两种方式

3 DOM事件流

4 事件对象

继续阅读

addeventlistener事件第三个参数_浅析 JavaScript 中的事件委托

a标签点击事件_JS事件绑定的三种方法

js 异步执行_JS异步执行机制——事件循环（Event Loop）

a标签点击事件_JavaScript 中常见HTML事件

addeventlistener事件参数_JavaScript 事件的传播

addeventlistener事件第三个参数_《DOM事件机制》

addeventlistener事件第三个参数_JS DOM 事件流、事件冒泡

java菜单实现功能_js实现桌面右键，出现右键菜单功能开始：

addeventlistener事件参数_「React进阶系列」史上最全React事件机制详解框架总览DOM事件流的三个阶段关于React事件的疑问从React的事件机制源码看整个流程

android stdio使用监听器来实现按钮事件_Java事件处理，低级事件类型：键盘事件+焦点事件，你真的懂吗？...低级事件类型觉得文章不错的话，可以转发关注一下小编，小编每天都会持续更新的！

addeventlistener事件第三个参数_DOM事件的简单思考

js button onclick 传参_用js去写一个简单的购物车

js点击事件onclick_关于JavaScript的事件绑定问题

bootstrap 单选按钮点击change事件只触发一次_UI设计干货：选框和按钮的设计这样做就对了！...

appcrash事件怎么解决_React实战—组件行为：React中的事件（4）