事件

注册事件

给元素添加事件，为注册事件或者绑定事件

注册事件两种方式

  1. 传统方式
  2. 监听事件方式

事件监听
  • addEventListener() 事件监听 (IE9以上)
eventTarget.addEventListener(type, listener, [useCapture])
  1. 参数type：            事件类型字符串，不要on 如click，mouseover
  2. 参数listener：       事件处理函数，触发的时候要做的事情
  3. 参数useCapture： 可选，是一个布尔值，默认false
  • attacheEvent() 事件监听 (IE678支持)
evetagrget.attachEvent(eventNameWithOn, callback)

  1. 参数eventNameWithOn： 事件类型字符串，不要on 如click，mouseover
  2. 参数callback：                   事件处理函数，触发的时候要做的事情

<body>

    <button>传统注册事件</button>

    <button>addEventListener  ie9以上</button>

    <button>attachEvent  ie678</button>

    <script>

        var btns = document.querySelectorAll('button');

        // 传统注册事件

        btns[0].onclick = function () {

            alert('传统方式')

        };

        // addEventListener 添加多个不覆盖

        btns[1].addEventListener('click', function () {

            alert('ddEventListener  ie9以上')

        });

        btns[1].addEventListener('click', function () {

            alert('ddEventListener  ie9以上---2')

        });

        //attachEvent

        btns[2].attachEvent('click', function () {

            alert('attachEvent')

        })

    </script>

</body>

示例代码

删除事件
  • 传统方式
btns.onclick = null
  • 方式删除监听事件
eventTarget.removeEventListener(type, listener, [useCapture])

  1. 参数type：            事件类型字符串，不要on 如click，mouseover
  2. 参数listener：       事件处理函数，触发的时候要做的事情
  3. 参数useCapture： 可选，是一个布尔值，默认false

<body>

    <button>addEventListener  ie9以上</button>

    <button>attachEvent  ie678</button>

    <script>

        var btns = document.querySelectorAll('button');

        // addEventListener 添加多个不覆盖

        btns[0].addEventListener('click', fn);

        function fn() {

            alert(222);

            this.removeEventListener('click', fn)

        }

        //attachEvent

        btns[1].attachEvent('click', fn1);

        function fn1() {

            alert(111);

            this.detachEvent('click', fn1)

        }

    </script>

</body>

示例代码

事件冒泡
  • onblur，onfocus，onmouseenter，onmouseleave 没有冒泡

dom 事件流，在js代码中

  1. 只能执行捕获或者冒泡其中的一个阶段；
  2. onclick 和 attachEvent（ie） 只能得到冒泡阶段；
  3. 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son；
  4. 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html –> document
<div class="father">

        <div class="son">son盒子</div>

    </div>

    <script>

        var son = document.querySelector('.son');

        // 给son 注册点击事件

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

            alert('son');

        }, true); // true--> 捕获阶段，flase---> 冒泡阶段

        // 给father注册单击事件

        var father = document.querySelector('.father');

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

            alert('father');

        }, true);

        // 给document 注册单击事件

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

            alert('document');

        }, true)

    </script>

事件捕获代码

<div class="father">

    <div class="son">son盒子</div>

</div>

<script>

    var son = document.querySelector('.son');

    // 给son 注册点击事件

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

        alert('son');

    }, false); // true--> 捕获阶段，flase---> 冒泡阶段

    // 给father注册单击事件

    var father = document.querySelector('.father');

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

        alert('father');

    }, false);

    // 给document 注册单击事件

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

        alert('document');

    })

</script>

事件冒泡代码

事件对象
  • 事件触发发生时会产生事件对象，并且系统会以实参形式传给事件处理函数
<body>

    <div>123</div>

    <script>

        var div = document.querySelector('div');

        div.onclick = function (event) {

            // event 就是事件对象， 形参

            event = event || window.event; // 兼容性问题

                console.log(event);

        }

    </script>

</body>

示例代码

事件对象属性和方法:

e.target和this区别

<body>

    <div>123</div>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

    <script>

        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) {

            console.log(e.target);   // 谁触发的就说谁， 这里是li

            console.log(this);  // 我们给ul 绑定了事件  那么this 就指向ul

        })

    </script>

</body>

示例代码

阻止默认行为

html的一种默认行为

<body>

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

    <form action="http://www.baidu.com">

        <input type="submit" value="提交" name="sub">

    </form>

    <script>

        var a = document.querySelector('a');

        a.addEventListener('click', function (e) {

            e.preventDefault()  // dom 标准行为，组织默认提交行为

        });

        // 传统方式阻止默认行为

        a.onclick = function (e) {

            e.preventDefault();

            return false  // 我们可以利用return false 也能阻止默认行为 没有兼容性问题

        };

        var from = document.querySelector('form');

        from.addEventListener('click', function (e) {

            e.preventDefault()

        })

    </script>

</body>

示例代码

阻止事件冒泡

e.stopPropagation()

<body>

    <div class="father">

        <div class="son">son儿子</div>

    </div>

    <script>

        var son = document.querySelector('.son');

        var father = document.querySelector('.father');

        son.addEventListener('click', function (e) {

            alert('son');

            e.stopPropagation();  // 阻止事件冒泡

        },false);

        father.addEventListener('click', function (e) {

            alert('father');

        }, false);

        document.addEventListener('click', function (e) {

            alert('document')

        })

    </script>

</body>

示例代码

事件委托

给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

<body>

    <ul>

        <li>知否知否，点我应有弹框在手！</li>

        <li>知否知否，点我应有弹框在手！</li>

        <li>知否知否，点我应有弹框在手！</li>

        <li>知否知否，点我应有弹框在手！</li>

        <li>知否知否，点我应有弹框在手！</li>

    </ul>

    <script>

       var ul = document.querySelector('ul');

       ul.addEventListener('click', function (e) {

           e.target.style.backgroundColor = 'red';  // 事件委托

       })

    </script>

</body>

示例代码

常用鼠标事件

鼠标事件对象

<script>

        document.addEventListener('click', function (e) {

            // 1. client 鼠标在可视区的x和y坐标

            console.log(e.clientX);

            console.log(e.clientY);

            console.log('---------------------');

            // 2. page 鼠标在页面文档的x和y坐标

            console.log(e.pageX);

            console.log(e.pageY);

            console.log('---------------------');

            // 3. screen 鼠标在电脑屏幕的x和y坐标

            console.log(e.screenX);

            console.log(e.screenY);

        })

    </script>

示例代码

相关代码: https://github.com/1515806183/html-code/tree/master/wapapi-01

JavaScript DOM–事件操作的更多相关文章

  1. 走进javascript——DOM事件

    DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...

  2. JavaScript Dom 事件

    JavaScript  Dom 事件 对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...

  3. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  4. dom事件操作例题，电子时钟，验证码，随机事件

    dom事件操作 当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...

  5. JavaScript DOM 事件模型

    JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...

  6. 前端JavaScript之DOM事件操作

    DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...

  7. JavaScript DOM事件模型

    早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...

  8. JavaScript DOM 常用操作

    1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...

  9. DOM事件操作

    DOM事件:对事件做出反应 当事件发生时,可以执行 JavaScript,比如:点击时 onClick="" 例:当用户点击时,会改变 <h1> 元素的内容: < ...

随机推荐

  1. 清晰架构（Clean Architecture）的Go微服务

    我用Go和gRPC创建了一个微服务项目,并试图找出最好的程序结构,它可以作为我其他项目的模板.我还将程序设计和编程的最佳实践应用于Go Microservice程序,例如清晰架构(Clean Arch ...

  2. MySQL存储引擎——MyISAM与InnoDB区别

    注:本文来自:https://blog.csdn.net/xifeijian/article/details/20316775 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型, ...

  3. 磁盘文件系统管理与LVM逻辑卷

    一.磁盘以及分区管理 无论是Linux系统还是Windows系统.当现有硬盘的规划不能满足当前需求时.我们就需要将其重新规划和调整 实现上述操作我们就需要用到fdisk磁盘及分区管理工具.此工具是大多 ...

  4. SpringBoot+Mybatis+MybatisPlus整合实现基本的CRUD操作

    SpringBoot+Mybatis+MybatisPlus整合实现基本的CRUD操作 1> 数据准备 -- 创建测试表 CREATE TABLE `tb_user` ( `id` ) NOT ...

  5. 通过 python 处理 email - Email via Python

    Email via Python 1 MIME - Multipurpose Internet Mail Extensions SMTP - Simple Message Transport Prot ...

  6. 一次压力测试Bug排查-epoll使用避坑指南

    Bug复现 使用Webbench对服务器进行压力测试,创建1000个客户端,并发访问服务器10s,正常情况下有接近8万个HTTP请求访问服务器. 结果显示仅有7个请求被成功处理,0个请求处理失败,服务 ...

  7. 杭电-------2052Picture（C语言）

    #include<stdio.h> int main() { int width, height; int i, j; while (~scanf("%d %d", & ...

  8. session和cookie的最深刻理解

    先说session 对SESSION的争论好象一直没有停止过,不过幺麽能理解SESSION的人应该占90以上.但还是讲讲,别嫌老~ 有一些人赞成用SESSION,有一些人不赞成.但这个问题到底要怎么说 ...

  9. StarUML之四、StarUML的Diagrams（图）与Elements（元素）及相关属性

    Diagrams(图)可以理解为画布  1:创建图 在右侧的Model Explorer管理界面的第一个节点右键,或者选择菜单中Model | Add Diagram | [DiagramType]都 ...

  10. Android Studio 学习笔记(五)：WebView 简单说明

    Android中一个用于网页显示的控件,实际上,也可以看做一个功能最小化的浏览器,看起来类似于在微信中打开网页链接的页面.WebView主要用于在app应用中方便地访问远程网页或本地html资源.同时 ...