DOM事件与对象

qq1374431665

于 2021-06-08 11:09:34 发布

阅读量44

点赞数

文章标签： dom js

本文链接：https://blog.csdn.net/qq1374431665/article/details/117672093

版权

DOM事件与对象

1、事件侦听（点击一次实现触发两种功能）
语法： btn.addEventListener()
示例：

		
	   btn.addEventListener('click',function(){
           alert('你好1');
       })
       btn.addEventListener('click',function(){
           alert('你好2');

创建button 按钮，使用addEventListener实现侦听事件。

2、解除侦听事件
语法：btn.addEventListener()

 var div = document.querySelectorAll('div');
        div[0].addEventListener('click',fn);
        function fn(){
            alert('你好！');
            div[0].removeEventListener('click',fn);

        }
        // 移除侦听 点击一次后，取消点击事件

3、事件流–捕获与冒泡
捕获阶段执行顺序 html --> father --> son
在三个层级盒子内设置father 和 son 点击事件中，当点击son盒子先执行father在执行son
示例：

// 1.捕获阶段 石头下层  执行顺序  html -->  div --> son
            var son = document.querySelector('#son');
            var father = document.querySelector('#father')
            son.addEventListener('click',function(){
              alert('lalallalal,我是son')
            },true);
            father.addEventListener('click',function(){
                alert('lalallalal,我是父亲')
            },true);

.冒泡阶段石头下沉气泡执行顺序 son --> father --> html
在三个层级盒子内设置father 和 son 点击事件中，当点击son盒子先执行son在执行father
在开发时，用的比较多的是冒泡阶段。

示例：


            // 2.冒泡阶段 石头下沉气泡 执行顺序  son --> div --> html
            var son = document.querySelector('#son');
            var father = document.querySelector('#father')
            son.addEventListener('click',function(){
                alert('lalallalal,我是son')
            },false);
            father.addEventListener('click',function(){
                alert('lalallalal,我是father')
            },false);

4、this与e.target事件

示例：

 // this 返回的是绑定事件，也就是注册事件是谁就返回谁
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(){
            console.log(this);
        })

        // target  返回的是触发事件  哪个元素做了那些事件操作，就返回当前的元素和操作
        var div = document.querySelector('div');
        div.addEventListener('click',function(e){
            console.log(e.target);
        })

**区别：this返回被绑定元素对象，target返回的是触发事件对象

5、阻止默认事件
让页面不能进行跳转，或者让提交按钮不能提交
语法： e.preventDefault()
示例：

 var a = document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault()
        })

6、阻止事件冒泡
语法：e.stopPropagation()
示例：
当点son盒子不会触发其他盒子

// 阻止事件冒泡。当点击当前事件，不触发其他事件
            var son = document.querySelector('#son');
            var father = document.querySelector('#father')
            son.addEventListener('click',function(e){
                alert('lalallalal,我是son')
                e.stopPropagation();
            },false);
            father.addEventListener('click',function(){
                alert('lalallalal,我是father')
            },false);

7、事件委托
前言：因为在li列表当中需要给每个小li设置监听事件，会比较麻烦，而且会影响页面的交互就绪时间。
事件委原理：
不是在每个子节点上设置监听事件，而是在设置在其父节点上，利用冒泡原理影响每个子节点
示例：

  <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
<body>

<script>
            // 事件委托 原理：在其父节点上设置侦事件，来影响子节点
            var ul = document.querySelector('ul');
            ul.addEventListener('click',function(){
                alert('你很牛啊！') 
                // e.target 可以得到点击对象
            })

qq1374431665

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件与对象

DOM事件与对象1、事件侦听（点击一次实现触发两种功能）语法： btn.addEventListener()示例： btn.addEventListener('click',function(){ alert('你好1'); }) btn.addEventListener('click',function(){ alert('你好2');创建button 按钮，使用addEventListener实现侦听事件。
复制链接

扫一扫