JS-day08

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量219 收藏 3
点赞数 9
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75449897/article/details/140734723
版权

目录

01-DOM事件

02-事件对象event

03-this指向

04-mouse

05-键盘事件

06-窗口事件

07-表单事件

08-表单事件举例

09-注册事件处理程序

10-事件冒泡

11-循环绑定事件

12-事件委托

13-总结

01-DOM事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 事件三要素: 1.事件源(给谁绑定事件) 2.事件类型(绑定一个什么事件)  3.事件处理程序(绑定事件后要干嘛)
        // btn.onclick = function () { }
    </script>
</body>

</html>

02-事件对象event

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .father {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: #f00;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <button>点击</button>

    <div class="father">
        <div class="son"></div>
    </div>

    <a href="">点击</a>

    <script>
        var btn = document.getElementsByTagName("button")[0];

        // 单击事件
        // 事件对象 event 
        btn.onclick = function (e) {
            console.log("点我干啥");
            console.log(e);

            // 属性
            // 事件的触发者
            console.log(e.target);
        }

        var father = document.getElementsByClassName("father")[0];

        father.onclick = function (e) {
            console.log("点击");
            // 事件触发者
            console.log(e.target);

            console.log(e.type);

            // console.log(e.currentTarget);
        }

        // 获取a标签
        var link = document.getElementsByTagName("a")[0];

        link.onclick = function (e) {
            console.log("点击a标签");

            // 阻止默认事件
            e.preventDefault();
        }

        // 键盘事件
        document.body.onkeydown = function (e) {
            // 键码
            console.log(e.keyCode);
        }
    </script>
</body>

</html>

03-this指向

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .father {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: #f00;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        // 普通函数 this 指向 window
        // 构造函数 this 指向 实例化对象
        // 对象方法中的 this 指向 对象本身

        // 事件中的 this 指向事件源 事件的绑定者

        var father = document.getElementsByClassName("father")[0];
        var son = document.getElementsByClassName("son")[0];

        father.onclick = function (e) {

            // 事件的触发者
            console.log(e.target);
            // 事件的绑定者
            console.log(this);
        }
    </script>
</body>

</html>

04-mouse

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid #000;

            overflow: auto;
        }

        .son {
            width: 200px;
            height: 800px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
    </div>
    <script>
        var box = document.getElementsByClassName("box")[0];

        // 进入子元素会再次触发
        // box.onmouseover = function () {
        //     console.log("鼠标刚进入");
        // }

        // box.onmouseenter = function () {
        //     console.log("鼠标完全进入");
        // }

        // box.onmouseout = function () {
        //     console.log("鼠标刚要离开");
        // }

        // box.onmouseleave = function () {
        //     console.log("鼠标完全离开");
        // }

        // box.onmousemove = function () {
        //     console.log("鼠标移动");
        // }


        // box.onmousedown = function () {
        //     console.log("鼠标按下");
        // }

        // box.onmouseup = function () {
        //     console.log("鼠标弹起");
        // }

        // box.ondblclick = function () {
        //     console.log("鼠标双击");
        // }

        // box.onmousewheel = function () {
        //     console.log("鼠标滚轮滚动");
        // }

        box.onscroll = function () {
            console.log("滚动条滚动");
        }

        box.oncontextmenu = function () {
            console.log("右击菜单");
        }
    </script>
</body>

</html>

05-键盘事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        document.body.onkeydown = function (e) {
            console.log("键盘按下");
            console.log(e);
        }

        document.body.onkeypress = function () {
            console.log("按着不放");
        }

        document.body.onkeyup = function () {
            console.log("键盘弹起");
        }
    </script>
</body>

</html>

06-窗口事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>
        window.onload = function () {
            var box = document.getElementsByClassName("box")[0];
            console.log(box);
        }
    </script>
</head>

<body>

    <div class="box"></div>

    <script>
        // onload 
        // window.onload = function () {
        //     console.log("资源加载完成");
        // }

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

        window.onunload = function () {
            console.log("关闭窗口");
        }
    </script>
</body>

</html>

07-表单事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text">

    <!-- action 提交后的跳转页面 -->
    <form action="./03-this指向.html">
        <input type="text" name="" id="">

        <input type="submit">
        <input type="reset">
    </form>
    <script>
        var inp = document.getElementsByTagName("input")[0];
        var form = document.getElementsByTagName("form")[0];

        // 内容改变事件
        inp.onchange = function () {
            console.log("内容改变");
        }

        // 获取焦点
        inp.onfocus = function () {
            console.log("获取焦点");
        }

        // 失去焦点
        inp.onblur = function () {
            console.log("失去焦点");
        }

        // 输入事件
        inp.oninput = function () {
            console.log("输入事件");
        }

        // 提交事件
        form.onsubmit = function () {
            console.log("提交成功");
        }

        // 重置事件
        form.onreset = function(){
            console.log("重置");
        }
    </script>
</body>

</html>

08-表单事件举例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" maxlength="20">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <p>还可以输入 <span>20</span> 个字</p>

    <script>
        var inp = document.getElementsByTagName("input")[0];
        var num = document.getElementsByTagName("span")[0];

        inp.oninput = function () {
            // this 指向事件源
            num.innerHTML = 20 - this.value.length;
        }
    </script>
</body>

</html>

09-注册事件处理程序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <!-- <button onclick="alert('点击')">点击</button> -->

    <div class="box"></div>

    <script>
        var box = document.getElementsByClassName("box")[0];
        // 1. on 事件
        // box.onclick = function () {
        //     console.log("on 事件");
        // }

        // box.onclick = function () {
        //     console.log("第二个事件");
        // }

        // 2.addEventListener()
        box.addEventListener("click", function () {
            console.log("事件1");
        });

        box.addEventListener("click", function () {
            console.log("事件2");
        });
    </script>
</body>

</html>

10-事件冒泡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: #f00;
        }

        .son1 {
            width: 200px;
            height: 200px;
            background-color: #0f0;
        }

        .son2 {
            width: 100px;
            height: 100px;
            background-color: #00f;
        }
    </style>
</head>

<body>
    <div class="father">

        <div class="son1">

            <div class="son2"></div>

        </div>

    </div>

    <script>

        var father = document.getElementsByClassName("father")[0];
        var son1 = document.getElementsByClassName("son1")[0];
        var son2 = document.getElementsByClassName("son2")[0];

        // father.onmouseover = function (e) {
        //     console.log("进入" + e.target.className);
        // }

        father.onclick = function () {
            console.log(this);
        }

        son1.onclick = function (e) {
            console.log(this);
            // 阻止事件冒泡
            e.stopPropagation();
        }

        son2.onclick = function (e) {
            console.log(this);
            // e.stopPropagation();

        }


        // 事件传递过程
        // 事件捕获
        // 目标阶段 （事件执行）
        // `事件冒泡`: 当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。
        //            在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，
        //            直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。

        // 阻止事件冒泡
    </script>

</body>

</html>

11-循环绑定事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .nav {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 500px;
            margin: 30px auto;
        }

        li {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            float: left;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>

        var list = document.getElementsByTagName("li");
        
        for (var i = 0; i < list.length; i++) {
            // 事件属于异步操作
            // i 5
            list[i].onclick = function () {
                // this
                this.style.backgroundColor = "pink";
            }
        }
    </script>
</body>

</html>

12-事件委托

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .nav {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 700px;
            height: 30px;
            margin: 30px auto;
        }

        li {
            width: 100px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid #ccc;
            box-sizing: border-box;
            float: left;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        // 事件委托：将原本绑定在子元素身上的事件，现在绑定到父元素身上，利用事件冒泡机制和 事件对象，触发当前事件。

        var nav = document.getElementsByClassName("nav")[0];

        nav.onclick = function (e) {
            // 事件的触发者
            // console.log(e.target);
            e.target.style.backgroundColor = "pink";
        }
    </script>
</body>

</html>

13-总结

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.事件三要素
        // 2.事件对象 属性 方法
        // 3.事件 this 指向
        // 4.鼠标事件 键盘事件 窗口事件 表单事件
        // 5.注册事件处理程序的方法  on  addEventListener()
        // 6.事件传递过程：捕获阶段 目标阶段    !!!事件冒泡
        // 7.循环绑定事件  事件委托
    </script>
</body>

</html>

2201_75449897
关注
  • 9
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
cgb2106-day08
cgblpx的博客
08-04 4664
标题
FE21-JS-DAY08-Vendula-Yasmin
03-16
FE21-JS-DAY08-Vendula-Yasmin
JavaScript-day04
2201_75449897的博客
07-20 248
【代码】JavaScript-day04。
JavaScript-day01
2201_75449897的博客
07-19 155
【代码】JavaScript -day01。
Js-day2
2203_75335776的博客
08-16 110
react-day-picker 时间菜单一直显示
徐同保的专栏
12-20 360
http://react-day-picker.js.org/api/DayPickerInput showOverlay boolean = false Show the overlay during the initial rendering of the component. This is useful if you want to keep the overlay visibile while styling it. showOverlay 值设置为true即可 ...
vue.js--day7
想搞全栈的前端
05-02 616
文章目录day7使用mui的`tab-top-webview-main`完成分类滑动栏兼容问题移除严格模式[vue-preview](https://github.com/LS1231/vue-preview) day7 使用mui的tab-top-webview-main完成分类滑动栏 兼容问题 和 App.vue 中的 router-link 身上的类名 mui-tab-item 存在兼容...
前端Vue入门-day08-vant组件库
来自计科大一萌新的编程记录本
08-03 4570
学习目标：学会使用vant组件库实现vue项目
JavaScript学习--Day05
weixin_65829986的博客
09-11 188
开发中，提倡多使用剩余参数。
JavaScript-day36
weixin_43369815的博客
03-03 196
1. JS初识 JS : JavaScript
JS-DAY01
qq_52572989的博客
03-24 1072
JS简介、注释、变量、数据类型
30-day-of-javascript-day-1
03-04
【标题】"30-day-of-javascript-day-1" 是一个关于JavaScript编程的学习计划，旨在帮助初学者在30天内逐步掌握JavaScript的基础知识。这个计划的第一天通常会涵盖JavaScript的入门概念，为后续的学习打下坚实的基础...
js-on-this-day
03-13
在"js-on-this-day-master"这个压缩包文件中，"master"通常指的是Git仓库的主分支，这表明该项目使用Git进行版本控制，并且可能包含了项目的源代码、资源文件、配置文件等。在解压后，我们可以期待找到如下的结构： ...
Javascript-day-2
02-26
在"Javascript-day-2"的学习中，你可能会接触到如何在浏览器环境中运行JavaScript（例如通过标签、DOM元素事件监听、Node.js环境），如何使用开发者工具进行调试，以及如何开始处理DOM（Document Object Model）以...
JS-day01_js_
09-30
"JS-day01_js_"这个标题暗示了这是一个关于JavaScript的基础学习资料，可能是第一天的学习内容或者是一个初级教程的集合。 在描述中提到"JS的入门资料，含简单程序和文档说明"，这意味着这个压缩包可能包含了一系列...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 440
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 83
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 267
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值