8.10笔记JS高级编程 --------＞事件

最新推荐文章于 2025-08-05 15:28:01 发布

zxf318

最新推荐文章于 2025-08-05 15:28:01 发布

阅读量283

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： javascript java 开发语言

本文链接：https://blog.csdn.net/zxf318/article/details/126275548

笔记专栏收录该内容

13 篇文章

订阅专栏

这篇博客深入探讨了JavaScript中的事件处理，包括如何阻止浏览器默认事件、阻止事件冒泡、处理鼠标和键盘事件，以及表单事件。还提到了重绘和回流的概念，并介绍了全栈开发中关于服务器、端口和协议的基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

面试，笔试：重绘和回流（另叫重排）

浏览器渲染过程：

1.解析HTML创建DOM树

2.解析CSS创建CSSOM（css rule true css规则树）

3.将DOM树和CSSOM结合，合成一个Render Tree（渲染树）

4.根据渲染树，去布局绘制并显示

重绘：样式变不影响布局改变

重排：样式变布局改变

重绘不一定引起回流，但回流一定会引起重绘

举例哪些引起回流和重绘：争对CSS一个，争对JS一个

如让标签隐藏或改变标签的宽高，通过JS往页面中添加DOM元素，通过JS获取元素的尺寸大小或偏移量

重绘和回流不能避免只能减少。

浏览器解析

三次握手，四次挥手

服务器====搭建本地服务器，局域网访问

每个服务器对应都有一个端口号

https:// www.baidu.com/ ==> http:14.215.177.38/

全栈用小黑窗

ping 解析域名对应的IP

https/http :协议

https协议的默认端口号：443

www.baidu.com：域名

每个域名都有对应的IP

客户端（浏览器） = 》百度服务器

1.进行IP解析后

2.进行连接（http请求），三次握手四次挥手

3.加载解析html：代码从上往下执行，执行中解析html标签创建DOM树

解析css创建CSSOM将DOM和CSSOM结合，合成一个Render Tree（渲染树），据渲染树去布局

01.阻止浏览器默认事件

HTML代码

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

JS代码

  document.querySelector("a").addEventListener("click", function () {
            // event.preventDefault();

            // 兼容IE
            // IE9以下不支持addEventListener只能支持onclick
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
            console.log(111);
        })


        // contextmenu:鼠标右键事件    ----->所有右键事件先打开检查再刷新
        window.oncontextmenu = function () {
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
            console.log("鼠标右键事件");
        }

02.阻止事件冒泡

grendprent //显示事件的阶段

event.stopPropagation(); //同一个标签绑定的同一事件不能阻止

event.stopImmediatePropagation(); //阻止冒泡和后面多次点击事件，统一类型下同一个标签绑定的同一事件也阻止

onclick只能执行最后一次,addEventListener可绑定多次点击事件

HTML代码

 <div class="grendprent">
        <div class="prent">
            <div class="son">son</div>
        </div>
    </div>

CSS代码

  .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .prent {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .grendprent {
            width: 400px;
            height: 400px;
            background-color: yellow;
        }

JS代码

  let grendprent = document.querySelector(".grendprent");
        let prent = document.querySelector(".prent");
        let son = document.querySelector(".son");
        son.addEventListener('click', function () {
            console.log('点击了son:', event.eventPhase);
            // 阻止事件冒泡
            // event.stopPropagation();
            /*event.stopPropagation?event.stopPropagation():event.cancelBubble = true; //兼容*/
            event.stopImmediatePropagation();
        })
        son.addEventListener('lclick', function () { //dblclick
            console.log('第二次绑定click事件');
        });

        prent.addEventListener('click', function () {
            console.log('点击了parent:', event.eventPhase);
        });
        grendprent.addEventListener('click', grandParentClick);

        function grandParentClick() {
            console.log('点击了grandParent:', event.eventPhase);
            console.log(this);
        }

03.鼠标的常见事件

鼠标单击事件: click;

鼠标双击事件: dblclick;

鼠标右键事件: contextmenu;

鼠标按下事件: mousedown;

鼠标松开事件: mouseup;

鼠标移入事件mouseenter; // mouseenter mouseleave不支持冒泡

鼠标移出事件mouseleave;

鼠标移入事件mouseover;

鼠标移出事件mouseout;

鼠标移动事件: mousemove

鼠标滚轮事件: mousewheel

拖动事件: 开始-- > dragstart, //必须设置绝对定位单个标签无内容不可拖动

dragover需要清除浏览器默认事件, 不然无法触发-- > drop事件

结束-- > drop

HTML代码

 <!-- <div class="box box1">box1</div> -->
    <div class="box box2">box2</div>
    <!--  <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">box5</div> -->

CSS代码

 .box2 {
            width: 300px;
            height: 200px;
            background-color: #ccc;
            position: absolute;
            /* 绝对定位 */
        }

JS代码

  let allBox = document.querySelectorAll(".box");
        let clickX, clickY;
        allBox[0].addEventListener('dragstart', function () {
            console.log(1);
            // 获取位置
            clickX = event.offsetX;
            clickY = event.offsetY;
        });
        window.addEventListener('dragover', function () {
            console.log(2);
            event.preventDefault();
        });
        window.addEventListener('drop', function () {
            console.log(3);
            allBox[0].style.left = `${event.pageX-clickX}px`;
            allBox[0].style.top = `${event.pageY-clickY}px`;

        })
        allBox[0].onclick = function () {
            console.log(5555);
        }

04.键盘事件------>小游戏阶段

相应窗口而不是标签

window.onkeydown //按下

window.onkeyup //松开

JS代码

     window.onkeydown = function () {

            console.log("键盘按下事件");

            console.log(event.keyCode); //ASCII编码

            console.log(event.key); //按下的键值
        }

05.其它事件

JS代码

 // 页面的所有资源加载完成后执行 load 事件 ----->只执行一次
        window.onload = function () {
            console.log(111);
        }

        // 滚动事件
        window.onscroll = function () {
            console.log(document.body.scrollTop || document.documentElement.scrollTop); //兼容
        }

        console.log("监听窗口大小变化======Css监听窗口大小变化====重点");
        // 监听窗口大小变化-------->Css监听窗口大小变化+++++重点

        // 能用CSS的就不用JS

        window.onresize = function () {
            console.log("监听窗口大小变化");
        }


        // 监听加载图片资源是否完成
        获取标签绑定onload事件
        document.querySelector("img").onload = function () {
            console.log("图片加载完成就执行");
        }
        // 创建图片标签1.
        let img1 = document.createElement('img');
        img1.src = '   '

        // 创建图片标签2.
        let img2 = new Image();
        img2.src = '   '
        body.append(" img2") //把标签放在页面中

JSON:

  console.log("转JSON对象++ ++ ++ ++ +");
        let obj = {
            name: " xiaoming",
            age: 20
        };
        console.log(obj.toString());
        console.log(JSON.stringify(obj));
        console.log(JSON.stringify(result));
        let r = JSON.stringify(result);
        console.log(JSON.parse(r));

06.表单事件

HTML代码

 <form>
        <input type="text" name="account" value="112333">
        账号：<input type="text" name="tex">
        <br>
        密码:<input type="password" name="pwd">
        <br>
        <input type="reset" value="重置">
        <!-- <input type="button" value="提交"> -->
        <input type="submit" value="提交">
        <!-- <input type="search" name="" id=""> -->
    </form>

JS代码

  let form = document.querySelector('from');
        // 提交事件
        form.onsubmit = function () {
            console.log("表单提交的时候触发");
          // 阻止表单提交
            return false //提交为空 false阻止提交
        }


        // 重置
        from.onreset = function () {
          console.log("表单重置的时候触发");
        }


        let accountInput = document.querySelector('input[name = "account"]')

        // 输入框聚焦事件
        accountInput.onfocus = function () {
         console.log("输入框聚焦事件");
        }

        // 输入框失去焦点事件
        accountInput.onblur = function () {
          console.log("输入框失去焦点事件");
        }

        // 输入框值一改变触发input 事件
        accountInput.oninput = function () {
            console.log("输入框值一改变触发");
        }

        //change事件   
        accountInput.onchange = function () {

            console.log("失去焦点的时候与聚焦是不一样触发");
        }

        accountInput.onselect = function () {
            console.log("用户选取时触发");
        }

       document.querySelector('input[type="search"]').onsearch = function(){
            console.log("用户去搜索的时候触发search");
        }

07.鼠标的单击和双击事件

无API提供-- > 逻辑代码实现

延时setTimeout()
JS代码

      let Box = document.querySelectorAll('.box');
        let tid = 0;
        Box[0].addEventListener('click', function () {
            if (tid) {
                clearTimeout(tid);
                tid = 0; //必须清除   判断
                return;
            }
            tid = setTimeout(() => {
                console.log("鼠标单击事件");
                console.log("单击事件的逻辑代码");
                tid = 0; //必须清除
            }, 500);
        });

        Box[0].addEventListener('dblclick', function () {
            console.log("鼠标双击事件");
            console.log("双击事件的逻辑代码");
        });

定位慎用

绝对定位：脱离文档流：贴边，一个在另一个上

display = 'flex';显示

用display = 'block';会改变设置的样式

计算属性耗性能