JavaScript基础学习（三）

最新推荐文章于 2024-05-11 10:05:08 发布

Jenny_Ghost

最新推荐文章于 2024-05-11 10:05:08 发布

阅读量466

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/jenny_ghost/article/details/122537455

版权

一、DOM事件流

事件流描述的是从页面接收事件的顺序，事件发生时会在元素节点之间按特定的顺序传播，传播过程叫做DOM事件流

JS代码只能执行捕获或冒泡其中的一种阶段，addEventListener(type,function,useCapture),如果第三个参数为true，表示在捕获阶段调用事件处理程序；如果是false，表示在事件冒泡阶段调用事件处理程序。

当第三个参数为true时

<body>
    <div class="father">
        <div class="son">son</div>
    </div>
    <script>
        // 捕获阶段
        var son = document.querySelector('.son');
        son.addEventListener('click',function(){
            alert('sonsonson');
        },true);
        var father = document.querySelector('.father');
        father.addEventListener('click',function(){
            alert('fatherfather');
        },true)
    </script>
</body>

因为捕获阶段是 document -> html -> body -> father -> son的顺序进行，所以网页先进行一个father的弹，再进行一个son的弹。

当第三个参数为false 或省略的时候，则处于冒泡阶段 son -> father -> body -> html -> document

<body>
    <div class="father">
        <div class="son">son</div>
    </div>
    <script>
        // 捕获阶段
        var son = document.querySelector('.son');
        son.addEventListener('click',function(){
            alert('sonsonson');
        });
        var father = document.querySelector('.father');
        father.addEventListener('click',function(){
            alert('fatherfather');
        })
    </script>
</body>

此时弹窗先弹出son，再弹出father

二、事件对象

事件对象在函数的小括号里，当作形参来看待，不需要我们来传递参数，是系统自己创建的。

事件对象是事件的一系列相关数据的集合，跟事件相关。比如鼠标点击里面就包括了鼠标的坐标、鼠标的事件等。

<body> 
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click',function(event) {
            console.log(event);
        })
    </script>
</body>

，这里的event可以自己命名。

1.事件对象的常见属性和方法

下面代码可以阻止链接跳转

<body>
    <a href="#">链接</a>

    <script>
        var a = document.querySelector('a');
        a.addEventListener('click',function(e){
            e.preventDefault();
        })
    </script>
</body>

1.1阻止事件冒泡

使用stopPropagation()

下面代码与上面的事件流中的冒泡相同，只是多加了一行 e.stopPropagation();

<body>
    <div class="father">
        <div class="son">son</div>
    </div>
    <script>
         //冒泡阶段
        var son = document.querySelector('.son');
        son.addEventListener('click',function(e){
            alert('sonsonson');
            e.stopPropagation();
        });
        var father = document.querySelector('.father');
        father.addEventListener('click',function(){
            alert('fatherfather');
        })
</body>

此时点击son标签只会弹出sonsonson不会将father弹出

1.2事件委托

事件委托原理：不在子节点上单独设置事件监听器，而是在其父节点上设置事件监听器，利用冒泡原理影响每个子节点。

例如

<ul>
        <li>lili</li>
        <li>lili</li>
        <li>lili</li>
        <li>lili</li>
        <li>lili</li>
    </ul>

要给每个li标签设置事件，就可以在ul标签上设置点击事件，通过target来得到当前点击的是哪个对象

eg.

<body>
    <ul>
        <li>lili</li>
        <li>lili</li>
        <li>lili</li>
        <li>lili</li>
        <li>lili</li>
    </ul>

    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            e.target.style.backgroundColor = 'blue';
        })
    </script>
</body>

点击任意一个li标签使得li标签背景颜色变为蓝色

三、常用鼠标事件

1.contextmenu禁用右键菜单

document.addEventListener('contextmenu',function(e){
    e.preventDefault();
})

2.selectstart禁止鼠标选中

document.addEventListener('selectstart',function(e){
    e.preventDefault();
})

3.获取鼠标坐标

clientX、Y都是距离整个窗口的上边和左边的距离，拖动滚动条不会改变他的坐标位置

pageX。Y是整个页面文档的坐标

3.1鼠标图标跟随鼠标移动（案例）

需要把图片的定位方式设置为absolute

<body>
    <img src="./ic_yumaoqiu.png">
    <script>
        var pic = document.querySelector('img');
        pic.addEventListener('click',function(e){
            e.preventDefault();
        })
        document.addEventListener('mousemove',function(e){
            var x = e.pageX;
            var y = e.pageY;
            pic.style.left = x + 'px';
            pic.style.top = y + 'px';
        })
    </script>
</body>