Day06-JavaScript

前端拓海

已于 2023-12-02 15:03:23 修改

阅读量127

点赞数 5

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

于 2023-11-29 10:30:30 首次发布

本文链接：https://blog.csdn.net/Spirs/article/details/134682465

版权

一.单击事件

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <input type="text" class="txt">
    <img src="../img/1.png" alt="" class="pic">
    <script>
        // 1.事件源 - 事件的触发者
        var box = document.getElementsByClassName("box")[0];
        var txt = document.getElementsByClassName("txt")[0];
        var pic = document.getElementsByClassName("pic")[0];

        // 给box绑定一个单机事件
        // 2. 事件类型 - 什么事件
        // 3. 事件处理程序 - 做什么
        box.onclick = function () {
            console.log(1);

            // 获取表单控件的值
            console.log(txt.value);
            var div = document.createElement("div");
            div.innerText = txt.value;
            console.log(div);

            // 追加内容
            box.appendChild(div)
        }

        // 旗帜法则
        var flage = true;
        pic.onclick = function () {
            if (flage) {
                pic.src = "../img/2.png";
                flage = false;
            } else {
                pic.src = "../img/1.png";
                flage = true;
            }

        }
    </script>
</body>

</html>

二.鼠标事件

<script>

        // 获取元素
        var box = document.getElementsByClassName("box")[0];

        // 鼠标事件

        // 鼠标刚进入时触发 onmouseover
        // box.onmouseover = function(){
        //     console.log("鼠标刚进入");
        // }

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

        // 鼠标移动事件 触发  onmousemove
        // box.onmousemove = function () {
        //     console.log("鼠标移动触发")
        // }

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

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

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

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

        // 鼠标单机触发 onclick 
        // box.onclick = function () {
        //     console.log("单机触发");
        // }

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

        // 当鼠标滚轮被滚动时 运行的脚本  onmousewheel
        // document.onmousewheel = function(){
        //     console.log("鼠标滚轮被滚动");
        // }

        // 当元素的滚动条被滚动时 触发  onscroll
        // box.onscroll = function(){
        //     console.log("元素的滚动条动了");
        // }


        // 当用户右键打开菜单栏触发 oncontextmenu
        document.oncontextmenu = function () { 
            console.log("用户打开菜单栏了");
        }

        // document 也可以作为你的事件源
        // out 和 over  支持事件冒泡
        // enter 和 leave  不支持事件冒泡

</script>

三.事件冒泡

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        
        .son {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
</head>

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

        // 都绑定上 onmouseover 事件  鼠标刚进入事件
        box.onmouseover = function() {
            console.log("父元素的进入事件");
        }
        son.onmouseover = function() {
            console.log("子元素的进入事件");
        }

        // 1.解决办法
        box.onmouseenter = function() {
            console.log("父元素的进入事件");
        }
        son.onmouseenter = function() {
            console.log("子元素的进入事件");
        }

        // 当相互嵌套的两个元素绑定了相同的事件
        // 就会触发事件冒泡
    </script>
</body>

</html>

四.事件对象

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }

        .box .son {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
    </div>
    <a href="" class="btn">点击一下</a>
    <script>

        // 在触发DOM元素上的某个事件时，会产生一个事件对象event，这个事件对象中包含着所有与事件 
           有关的信息。包括导致事件的元素、事件的类型以及其他与事件有关的信息。
        // 当事件触发时 函数会接受一个形参 这个参数就是事件对象 event


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

        box.onclick = function (event) {
            console.log(event);
            console.log("事件触发");
            // event.target 事件的触发者
            console.log(event.target);
            // type 指的是事件的类型 click

            // keyCode 指的是当前触发事件的键码
            // preventDefault() 阻止默认事件
            // stopPropagation() 阻止事件冒泡
        }

        // 键盘按下事件
        document.onkeydown = function (e) {
            console.log("触发");
            // 用户在页面触发键盘事件时 可以监听用户 按下的键
            console.log(e.keyCode);
        }
        btn.onclick = function (e) {
            console.log(123);
            // 阻止a 标签的默认事件
            // 利用 事件对象的 preventDefault
            e.preventDefault();
        }

        box.onmouseover = function () {
            console.log("父元素");
        }

        son.onmouseover = function (e) {
            // 阻止事件冒泡写在子元素身上

            console.log("子元素");
            e.stopPropagation();
        }
    </script>
</body>

</html>

五.this指针

 <script>

        // 普通函数
        function fun() {
            console.log(this); //window
        }
        fun();

        // 构造函数
        function Fun(a, b) {
            this.name = a;
            this.cause = b;
            console.log(this); //指向实例化对象
        }
        var obj = new Fun("郑凯", "压力");
        console.log(obj);

        // 对象方法里面的this
        var obj2 = {
            name: "黄晓明",
            nickname: "教主",
            working: function() {
                console.log("不再油腻");
                console.log(this); //指向该方法所属对象
            }
        }
        console.log(obj2);
        obj2.working;

        // 事件中的this
        decument.onclick = function(e) {
            console.log(this); //指向事件源
            console.log(e.target); //事件的触发者
        }

        // this指向问题
        // 1.普通函数中this指向window
        // 2.构造函数中this指向实例化对象
        // 3.对象方法中的this指向该方法所属对象
        // 4.事件中的this 指向 事件源

 </script>

六.表单事件

<body>

    <form class="form">
        <div>
            用户名: <input type="text" class="username">
        </div>
        <div>
            密码: <input type="password" class="pwd">
        </div>
        <div>
            日期: <input type="date">
        </div>
        <div>
            <input type="submit">
            <input type="reset">
        </div>
        <textarea name="" id="txt" cols="30" rows="10" maxlength="100" placeholder="还可以输入100个字"></textarea>
        <span class="title">还可以输入100个字</span>
    </form>

    <script>
        // 获取元素
        var username = document.getElementsByClassName("username")[0];
        var pwd = document.getElementsByClassName("pwd")[0];
        var _form = document.getElementsByClassName("form")[0];
        var title = document.getElementsByClassName("title")[0];
        var txt = document.getElementById("txt")

        // 内容改变事件 onchange
        username.onchange = function () {
            // 内容改变且失去焦点
            console.log("内容改变了");
        }

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

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

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

        txt.oninput = function () {
            // console.log("触发");
            console.log(this.value);
            console.log(this.value.length);
            title.innerText = "还可以输入" + (100 - this.value.length) + "个字"
        }


        // 表单提交事件 onsubmit  应该绑定给form
        _form.onsubmit = function () {
            alert("确定要提交吗?")
        }

        // 表单重置事件 onreset 绑给form 
        _form.onreset = function () { 
            alert("确定要重置吗")
        }
    </script>

</body>

</html>

七.键盘事件

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: 0 auto;
            position: relative;
        }

        .box .son {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>

<body>

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

    <script>

        // onkey down 键盘按下事件
        // onkeyup 键盘弹起事件
        // onkeypress 按着不放

        var son = document.getElementsByClassName("son")[0];
        var _top = 0;
        var _left = 0;
        document.onkeydown = function (e) {
            console.log("键盘按下");
            console.log(e.keyCode);
            // 上 38
            // 下 40 
            // 左 37
            // 右 39

            switch (e.keyCode) {
                case 38:
                    _top = _top - 20;
                    son.style.top = _top + "px";
                    break;
                case 40:
                    _top = _top + 20;
                    son.style.top = _top + "px";
                    break;
                case 37:
                    _left = _left - 20;
                    son.style.left = _left + "px";
                    break;
                case 39:
                    _left = _left + 20;
                    son.style.left = _left + "px";
                    break;
                default:
                    alert("未识别您按的键码");
                    break;
            }
            console.log(_top);
        }

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

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

    </script>

</body>

</html>

八.窗口事件

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 窗口事件 都是绑定给 window
        window.onload = function () {
            // 文档及其资源文件都加载完成时触发
            // 会等 DOM  图片、音频、视频等资源文件 加载完触发
            var box = document.getElementsByClassName("box")[0];
            console.log(box);
        }

        // 代码的执行顺序 从上往下 从左至右
    </script>

</head>

<body>

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

    <script>

        // onload文档及其资源文件都加载完成时触发  
        // onresize事件会在窗口或框架被调整大小时发生。
        window.onresize = function () {
            console.log('窗口大小改变了');

        }

        // onunload 关闭网页时 本地存储

        window.onunload = function () {
            console.log("网页被关闭了");
        }

    </script>

</body>

</html>