JavaScript小记——事件

Jmh-Ethereal

已于 2023-04-23 23:16:37 修改

阅读量209

点赞数 1

文章标签： html5 前端 html

于 2023-04-19 17:42:58 首次发布

本文链接：https://blog.csdn.net/m0_63138660/article/details/130207585

版权

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

Html事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

事件绑定的方式

方式1：直接把事件绑定在HTML元素上

<button onclick="show('hello')">一个按钮</button>

 function show(str) {
            alert("点击事件执行了"+str);
        }

方式2：使用代码来绑定事件

<body>

        <ul>
            <li class="aa">01</li>
            <li class="aa">02</li>
            <li class="aa">03</li>
            <li class="aa">04</li>
            <li class="aa">05</li>
        </ul>

    </body>


<script>

        let a = document.getElementsByClassName("aa");
        a[0].onclick = function() {
            alert("第一个执行了");
        }

    </script>

方式3：绑定事件

 <input type="button" value="我的按钮" id="btn">


let btn = document.getElementById("btn");
        var fun=function() {
            alert("按钮被点击了");
        }

        btn.addEventListener('click', fun);

事件解绑

<button id="btn">一个按钮</button>



var b=function() {
               alert("222222")
}
btn.addEventListener("click",b)

btn.removeEventListener("click",b);

常见的Html事件

焦点事件

针对表单项

onfocus 获取焦点

onblur 失去焦点

oninput 表单中内容发生变化时就触发

<body>
        <input type="text" name="username" value="请输入用户名" onfocus="show1()"  oninput="show3()">
        <span id="sp"></span>
    </body>
    <script>
        function show1() {
            document.getElementsByName("username")[0].value=""; //获取焦点时 输入框变为空
        }

        function show3() {
            console.log("边输入边校验");
            let input = document.getElementsByName("username")[0];
            let content = input.value;
            let regx=/^[a-z]{6,16}$/i;
            let flag = regx.test(content);
            let sp = document.getElementById("sp");
            if(flag){
                input.style.border = "2px solid green";
                sp.innerHTML = "<b style='color: green'>格式正确</b>";
            }else {
                input.style.border = "2px solid red";
                sp.innerHTML = "<b style='color: red'>格式错误</b>";
            }
        }

      
    </script>

键盘事件

* onkeydown 某个键盘按键被按下。不区分键码的大小写

* onkeypress 某个键盘按键被按下并松开。区分键码的大小写 a 97 A 65

* onkeyup 某个键盘按键被松开。

<body>
        <input type="text" onkeypress="show()">
    </body>
    <script>
        function show() {
            let code = event.keyCode;
            if(code===97||code===65){
                console.log("往前跑");
            }
            console.log("按键按下了："+code)
        }
    </script>

鼠标事件

onmousedown 鼠标按下

onmouseup 鼠标松开

onmouseover 鼠标移上

onmouseout 鼠标移开

onmousemove 鼠标移动

<body>
        <button id="btn" onmousedown="down()" onmouseup="up()" onmouseover="over()" onmouseout="out()" onmousemove="move()">一个按钮</button>
        <div id="a"></div>
    </body>
    <script>
        function down() {
            //which 也可以获取鼠标的按键编号 1 左键  2滚轮   3右键
            // button 也可以获取鼠标的按键编号 0 左键  1滚轮   2右键
            let code = event.which;
            alert("鼠标按下了"+code);
        }

        function over() {
            document.getElementById("btn").style.backgroundColor = "red";
        }
        function out(){
            document.getElementById("btn").style.backgroundColor = "green";
        }

        let div = document.getElementById("a");
        var w = div.getBoundingClientRect().width;
        var h = div.getBoundingClientRect().height;
        div.onmousemove=function() {
            div.style.width = (w++)+"px";
            div.style.height = (h++) + "px";
        }
    </script>

表单事件

<body>
        <form action="123.html" method="get" id="form" onsubmit="set()">
            用户名:
            <input type="text" name="username" placeholder="请输入6-16位字母" onblur="checkUsername()">
            <span id="a"></span>
            <br>
            密码:
            <input type="password" name="password" placeholder="请输入密码" onblur="checkPassword()">
            <span id="b"></span>
            <br>
            <br>
            <input type="submit" value="注册">
            <input type="reset" value="重置">

        </form>
    </body>

    <script>
        let myForm = document.getElementById("form");
        myForm.onsubmit=function() {
            return checkUsername&&checkPassword();
        }

        function checkUsername(){
            let input = document.getElementsByName("username")[0];
            var content= input.value;
            var regx=/^[a-z]{6,16}$/i;
            var flag=regx.test(content);
            let sp = document.getElementById("a");
            if (flag){
                //alert("格式正确")
                input.style.border="2px solid green";
                sp.innerHTML="<b style='color:green'>格式正确</b>";
            }else{
                //alert("格式不正确")
                input.style.border="2px solid red";
                sp.innerHTML="<b style='color:red'>格式错误</b>";
            }
            return flag;
        }

        function checkPassword(){
            let input = document.getElementsByName("password")[0];
            var content= input.value;
            var regx=/^[0-9]{6,16}$/;
            var flag=regx.test(content);
            let sp = document.getElementById("b");
            if (flag){
                //alert("格式正确")
                input.style.border="2px solid green";
                sp.innerHTML="<b style='color:green'>格式正确</b>";
            }else{
                //alert("格式不正确")
                input.style.border="2px solid red";
                sp.innerHTML="<b style='color:red'>格式错误</b>";
            }
            return flag;
        }
        function rest(){
            alert("表单重置");
        }
    </script>

其他事件

<script>
            //onload 等页面中的所有元素，加载完毕之后，回去执行
            window.onload = function () {
                let div = document.getElementById("d1");
                alert(div);
            }
        </script>

    </head>
    <body>
        <div id="d1"></div>
    </body>

下拉框、单选框、多选框事件

<body>
        <input type="text" placeholder="默认值文字" onselect="show()">
        <select name="" id="" onchange="show()">
            <option value="">请选择学历</option>
            <option value="">小学</option>
            <option value="">中学</option>
            <option value="">大学</option>
        </select>

        <input type="radio" name="sex" id="" onchange="show()">男
        <input type="radio" name="sex" id="" onchange="show()">女

        <input type="checkbox" name="hobby" id="" onchange="show()">音乐
        <input type="checkbox" name="hobby" id="" onchange="show()">踢球

    </body>

    <script>
        function show() {
            alert("选择了")
        }

        document.oncontextmenu=function() {
            return false;
        }

        document.body.oncopy=function() {
            return false;
        }
    </script>

事件对象

currentTarget: 获取的是绑定了该事件的元素对象

target : 获取的是触发了该事件的元素对象

type: 获取事件类型

keyCode 当绑定了键盘事件，可以从事件对象中获取按键的键码（ASCII码）

which/button 当绑定了鼠标事件，可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键

事件冒泡

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #a{
                width: 300px;
                height: 300px;
                background: red;
            }

            #b{
                width: 200px;
                height: 200px;
                background: yellow;
            }

            #c{
                width: 100px;
                height: 100px;
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="a" onclick="a()">
            <div id="b" onclick="b()">
                <div id="c" onclick="c()">

                </div>
            </div>
        </div>
    </body>

    <script>
        function a() {
            event.stopPropagation(); //阻止冒泡
            alert("a");
        }

        function b() {
            event.stopPropagation();//阻止冒泡
            alert("b");
        }

        function c() {
            event.stopPropagation();//阻止冒泡
            alert("c");
        }

    </script>
</html>

滚动事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #btn{
                position:fixed;
                right: 0;
                top: 200px;
                display: none;
            }
        </style>
    </head>
    <body>
        <hr size="7000">
        <button id="btn" onclick="show()">回到顶部</button>
    </body>
    <script>
        window.onscroll=function() {
            let scrollTop = document.documentElement.scrollTop;
            let btn = document.getElementById("btn");
            if (scrollTop >= 200) {
                btn.style.display="block";
            }else {
                btn.style.display = "none";
            }
        }

        function show() {
            window.scrollTo({
                left :0,
                top : 0,
                behavior:"smooth"

            })
        }
    </script>
</html>