JavaScript DOM–事件操作

事件

注册事件

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

注册事件两种方式

传统方式
监听事件方式

事件监听

addEventListener() 事件监听 (IE9以上)

eventTarget.addEventListener(type, listener, [useCapture])

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

attacheEvent() 事件监听 (IE678支持)

evetagrget.attachEvent(eventNameWithOn, callback)

参数eventNameWithOn：事件类型字符串，不要on 如click，mouseover
参数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])

参数type：事件类型字符串，不要on 如click，mouseover
参数listener：事件处理函数，触发的时候要做的事情
参数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代码中

只能执行捕获或者冒泡其中的一个阶段；
onclick 和 attachEvent（ie）只能得到冒泡阶段；
如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document -> html -> body -> father -> son；
如果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>

示例代码

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

走进javascript——DOM事件
DOM事件模型在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...
JavaScript Dom 事件
JavaScript Dom 事件对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...
JavaScript DOM 基础操作
JavaScript DOM 基础操作一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...
dom事件操作例题，电子时钟，验证码，随机事件
dom事件操作当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...
JavaScript DOM 事件模型
JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...
前端JavaScript之DOM事件操作
DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型定义了访问和操作HTML文档的标准法,把HT ...
JavaScript DOM事件模型
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...
JavaScript DOM 常用操作
1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...
DOM事件操作
DOM事件:对事件做出反应当事件发生时,可以执行 JavaScript,比如:点击时 onClick="" 例:当用户点击时,会改变 <h1> 元素的内容: < ...

随机推荐

Codevs 1205 单词反转（Vector以及如何输出string）
题意:倒序输出句子中的单词代码: #include<cstdio> #include<iostream> #include<string> #include< ...
CyclicBarrier与CountDownLatch区别
阻塞与唤醒方式的区别 CountDownLatch计数方式 CountDownLatch是减计数.调用await()后线程阻塞.调用countDown()方法后计数减一,当计数为零时,调用await( ...
一文带你了解 C# DLR 的世界
一文带你了解 C# DLR 的世界在很久之前,我写了一片文章dynamic结合匿名类型匿名对象传参,里面我以为DLR内部是用反射实现的.因为那时候是心中想当然的认为只有反射能够在运行时解析对象的成 ...
一本彻底搞懂MySQL索引优化EXPLAIN百科全书
1.MySQL逻辑架构日常在CURD的过程中,都避免不了跟数据库打交道,大多数业务都离不开数据库表的设计和SQL的编写,那如何让你编写的SQL语句性能更优呢? 先来整体看下MySQL逻辑架构图: M ...
VFP 图形文件与剪切板互换的API解决方法
在 VFP 中,凡遇图形处理,大多数情况下,都会涉及到图形文件与剪切板互换的情况.下面给出利用 API 解决的方法.这是原来从网上摘下来的,版权归原作者.基本处理的代码如下,你可以将其应用到你的代码中 ...
如何构建OpenStack镜像
本文以制作CentOS7.2镜像为例,详细介绍手动制作OpenStack镜像详细步骤,解释每一步这么做的原因.镜像上传到OpenStack glance,支持以下几个功能: 支持密码注入功能(nova ...
Danganronpa 水题。
Danganronpa Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
docker实战部署Javaweb项目
一.部署环境说明 docker服务版本:version 18.09.0nginx服务版本:version: nginx/1.15.10redis服务版本:version: redis/5.0.3tom ...
vue自带的实例属性和方法($打头)
Vue 实例内置了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = new Vue({ el: '#examp ...
Linux安装Redis，在测试阶段即make test出现“You need tcl 8.5 or newer in order to run the Redis test”问题解决方案
Linux安装Redis,在测试阶段即make test出现"You need tcl 8.5 or newer in order to run the Redis test"问题 ...

JavaScript DOM–事件操作

事件

注册事件

事件监听

删除事件

事件冒泡

事件对象

阻止默认行为

阻止事件冒泡

事件委托

常用鼠标事件

鼠标事件对象

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

随机推荐

热门专题