javascript中DOM的操作(2)

最新推荐文章于 2024-07-22 15:13:59 发布

l蓝猫

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量80

点赞数

文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/weixin_58821175/article/details/126115591

版权

事件操作

事件注册操作

事件注册操作中，有两种常用的方法，一种是传统的方式，另一种是比较常用的方式，在这里一一列出，这里需要自己运行点击才能看到结果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件注册操作</title>
</head>
<body>
<button>传统注册事件</button>
<button>方法监听注册事件</button>
<script>
    //在下面的测试中，屏幕只会弹出一个world框框，该传统方式会把第一个框框覆盖掉
    var btns = document.querySelectorAll('button');
    btns[0].onclick = function () {
        alert('hello');
    }
    btns[0].onclick = function () {
        alert('world');
    }
 
    //这个是用事件监听注册事件，解决了传统的覆盖问题，比较常用
    btns[1].addEventListener('click',function () {
        alert('欢迎');
    });
    btns[1].addEventListener('click',function () {
        alert('光临');
    });
</script>
</body>
</html>

删除事件

有些事件你只想执行有限次，所以你需要用到删除事件，就像注册账号时，发送过一个验证码之后，需要等一定的事件才能再次发送一样，这里也是展示两种方式的删除


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除事件</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    var divs = document.querySelectorAll('div');
 
    //传统方式删除事件
    divs[0].onclick = function () {
        alert('1');
        divs[0].onclick = null;
    }
 
    divs[1].addEventListener('click',fn);
    function fn() {
        alert('2');
        divs[1].removeEventListener('click',fn);
    }
</script>
</body>
</html>

DOM事件流

关于这个DOM事件流的描述，我都写到了注释里了，简单来说就是事件执行是有一定顺序的，可以理解为从父到子，从子到父


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM事件流</title>
    <style>
        .father {
            width: 200px;
            height: 200px;;
            background-color: green;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<!--DOM事件流分为三个阶段，一个是捕获阶段，一个是目标阶段，最后一个是冒泡阶段
如果我们给div注册了点击事件，那么首先是document接收到点击事件，没有执行程序，然后html接收到点击事件
没有执行程序，然后再是body接受到点击事件，也没有执行程序，这是捕获阶段。然后找到div，有执行程序，
找到div就是目标阶段了。 然后再回到body，收到点击事件，没有执行程序，再到html，也没有执行程序，最后到
document，也没有执行程序，这就是冒泡阶段-->
<div class="father">
    <div class="son">son</div>
</div>
 
<script>
 
    //捕获阶段，addEventListener 第三个参数为true
    // document->html->body->father->son
    var son = document.querySelector('.son');
    /*son.addEventListener('click',function () {
        alert('son');
    },true);
    var father = document.querySelector('.father');
    father.addEventListener('click',function () {
        alert('father');
    },true);*/
 
    //冒泡阶段, addEventListener 第三个参数为false，或者是省略
    // son->father->body->html->document
    son.addEventListener('click',function () {
        alert('son');
    },false);
 
    var father = document.querySelector('.father');
    father.addEventListener('click',function () {
        alert('father');
    },false);
 
</script>
</body>
</html>

事件对象

事件对象，也就相当于一个形参，是系统自动设置的，里面有很多的参数，这里截图展示下

上面有一个是target，返回的是div，在这里很容易与this产生混淆，这里举例单独说下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div>123</div>
<ul>
    <li>abc</li>
    <li>abc</li>
    <li>abc</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返回就是li
        console.log(this);//这里指向的绑定事件，也就是ul
    })
</script>
</body>
</html>

当点击ul中的li的时候, 返回的结果是不一样的