No.37 JavaScript---事件处理程序（添加事件）、事件类型之鼠标事件、Event事件对象、事件类型之键盘事件、事件类型之表单事件

一、添加事件

事件处理程序分为：

HTML事件处理
DOM0级事件处理
DOM2级事件处理

1.1 HTML事件处理（这种不用知道就行）

<body>
    <button onclick="clickHandle()">按钮</button>

    <script>
        //HTML事件
        function clickHandle(){   
            console.log("点击了按钮")
        }
    </script>

</body>

HTML事件:缺点:HTML和JS没有分开。

1.2 DOM0级事件处理

<body>
    <button id ="btn">按钮</button>

    <script>

        var btn = document.getElementById("btn")

        btn.onclick = function(){
            console.log("点击了按钮")
        }

    </script>

</body>

　DOM0事件:
- 优点:HTML和JS是分离的
- 缺点:无法同时添加多个事件

1.3 DOM2级事件处理

<body>
    <button id ="btn">按钮</button>

    <script>

        var btn = document.getElementById("btn")

        btn.addEventListener("click",function(){
            console.log("点击了")
        })
    </script>

</body>

　DOM2事件:

优点:事件不会被覆盖

缺点:写起来麻烦　

二、事件类型

2.1 鼠标事件

<!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>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div><button id ="btn1">1-单击</button></div>
    <div><button id ="btn2">2-双击</button></div>
    <div><button id ="btn3">3-鼠标按下</button></div>
    <div><button id ="btn4">4-鼠标抬起</button></div>
    <div id="btn5" class="box1"></div>
    <div id="btn6" class="box2"></div>
    
    <script>

        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        var btn3 = document.getElementById("btn3");
        var btn4 = document.getElementById("btn4");
        var btn5 = document.getElementById("btn5");
        var btn6 = document.getElementById("btn6");

        btn1.onclick = function(){
            console.log("单击");
        }

        btn2.ondblclick = function(){
            console.log("双击");
        }

        btn3.onmousedown = function(){
            console.log("鼠标按下")
        }

        btn4.onmouseup = function(){
            console.log("鼠标抬起")
        }

        btn5.onmousemove = function(){
            console.log("鼠标移动")
        }
        btn6.onmouseenter = function(){
            console.log("鼠标进入")
        }

    </script>

</body>
</html>

　　6/7/8/9的区别：mouseenter/mouseleave 与mouseover/mouseout

<!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>
        .root{
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="root" id="root">
        <div class="box" id="box"></div>
    </div>
    
    <script>

        var root = document.getElementById("root");

        //进入子节点再次触发
        root.onmouseover = function(){
            console.log("鼠标进入了")
        }
    </script>

</body>
</html>

三、Event事件对象

<body>
    <div><button id="btn">按钮</button></div>    
    <script>
        var btn = document.getElementById("btn");

        //Event 事件对象，其实就是参数，function(e/event)
        btn.onclick = function(event){
            console.log("event")
        } 
    </script>

</body>

3.1 Event 对象的属性

Event.target

Event.target属性返回事件当前所在的节点.拿到节点，可有修改节点了就。

<body>
    <div><button id="btn">按钮</button></div>    
    <script>
        var btn = document.getElementById("btn");

        //Event 事件对象，其实就是参数，function(e/event)
        btn.onclick = function(event){
            console.log(event.target)
            event.target.innerHTML = "dianjizhihou"
        } 
    </script>

</body>

Event.type

Event.type属性返回一个字符串，表示事件类型。事件的类型是在生成事件的时候。该属性只读。

<body>
    <div><button id="btn">按钮</button></div>    
    <script>
        var btn = document.getElementById("btn");

        //Event 事件对象，其实就是参数，function(e/event)
        btn.onclick = function(event){
            console.log(event.target)
            console.log(event.type)
            event.target.innerHTML = "dianjizhihou"
        } 
    </script>

</body>

3.2 Event 对象的方法

e.preventDefault()

Event.preventDefaut方法取消浏览器对当前事件的默认行为。比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了。

<body>
    <a href="https://tieba.baidu.com/" id="tb">百度贴吧</a>   
    <script>
        var tb = document.getElementById("tb");

        //Event 事件对象，其实就是参数，function(e/event)
        tb.onclick = function(e){
            e.preventDefault();//阻止默认事件
            //e.stopPropagation();
            console.log("点击了该链接");
        } 
    </script>

</body>

e.stopPropagation()

stopPropagation方法阻止事件在 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>
    <style>
        .root{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: rgb(170, 219, 114);
        }
    </style>
</head>
<body>
    <div class="root" id="root">
        <div class="box" id="box"></div>
    </div>
    <script>
        var root = document.getElementById("root");
        var box = document.getElementById("box");

        root.onclick = function(){
            console.log("root");
        } 
        box.onclick = function(){
            console.log("box");
        } 
    </script>

</body>
</html>

        box.onclick = function(e){
            e.stopPropagation();
            console.log("box");
        }

四、事件类型之键盘事件

<body>
    <input type="text" id="username">
    <script>
        var username = document.getElementById("username");
        username.onkeydown = function(){
            console.log("按下了");
        }
        username.onkeyup = function(e){
            console.log(e.target.value);//value属性就是输入框的数据
        }

    </script>

</body>

　Event对象：

keyCode:唯一标识

<body>
    <input type="text" id="username">
    <input type="text" id="pwd">
    <script>
        var username = document.getElementById("username");
        var password = document.getElementById("pwd");
        username.onkeydown = function(){
            console.log("按下了");
        }
        username.onkeyup = function(e){
            console.log(e.target.value);//value属性就是输入框的数据
        }

        password.onkeyup = function(e){
            //keyCode 代表每个按键的唯一标识，回车键是13
            console.log(e.keyCode)
            if(e.keyCode === 13){
                console.log("提交")
            }
        }

    </script>

</body>

　五、事件类型之表单事件

表单事件是在使用表单元素及输入框元素可以监听的一系列事件。

5.1 input 事件

input事件当<input>、<select>、<textarea>的值发生变化时触发。对于复选框(<input type=checkbox>)或单选框(<input type=radio>)，用户改变选项时，也会触发这个事件。
input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。

<body>
    <input type="text" id="username">
    <script>
        var username = document.getElementById("username");
        username.oninput = function(e){
            console.log(e.target.value)
        }

    </script>

</body>

input事件连续触发，实时变化。

5.2 select 事件（使用不多）

select事件当在<input>、<textarea>里面选中文本时触发。

<body>
    <input type="text" id="username">
    <script>
        var username = document.getElementById("username");

        username.oninput = function(e){
            console.log(e.target.value)
        }

        username.onselect = function(){
            console.log("选中了")
        }

    </script>

</body>

5.3 change 事件

Change事件当<input>、<select>、<textarea>的值发生变化时触发。它与input事件的最大不同，就是不会连续触发，只有当全部修改完成时才会触发。

<body>
    <div>用户名：<input type="text" id="username"></div>
    <div>密码：<input type="text" id="pwd"></div>
    <script>
        var username = document.getElementById("username");
        var password = document.getElementById("pwd");

        username.oninput = function(e){
            console.log(e.target.value);
        }

        password.onchange = function(e){
            console.log(e.target.value);  //失去焦点和回车的时候触发
        }

    </script>

</body>

5.4 reset事件和submit事件

与上面三个事件不同，reset事件和submit事件是发生在<form>表单对象上，而不是发生在表单的成员上。
reset事件当表单重置(所有表单成员变回默认值)时触发。
submit事件当表单数据向服务器提交时触发。
注意，submit事件的发生对象是 <tom>元素，而不是<buton> 元素，因为提交的是表单，而不是按钮。

<body>
    <form id="myform" onsubmit="submitHandle">
        <div><input type="text"></div>
        <button>提交</button>
        <button id="resetbtn">重置</button>
    </form>
    <script>
        var resetbtn = document.getElementById("resetbtn")
        var myform = document.getElementById("myform")
        resetbtn.onclick = function(){

            myform.reset();   //触发在表单上，清空 表单

        }

        function submitHandle(){
            console.log("tijiao")
        }
    </script>

</body>

posted @ 2025-03-07 16:03 百里屠苏top 阅读(60) 评论(0) 收藏举报

刷新页面返回顶部

百里屠苏top

No.37 JavaScript---事件处理程序（添加事件）、事件类型之鼠标事件、Event事件对象、事件类型之键盘事件、事件类型之表单事件

一、添加事件

事件处理程序分为：

1.1 HTML事件处理 （这种不用知道就行）

1.2 DOM0级事件处理

1.3 DOM2级事件处理

二、事件类型

2.1 鼠标事件

6/7/8/9的区别：mouseenter/mouseleave 与mouseover/mouseout

三、Event事件对象

3.1 Event 对象的属性

3.2 Event 对象的方法

四、事件类型之键盘事件

Event对象：

五、事件类型之表单事件

5.1 input 事件

5.2 select 事件（使用不多）

5.3 change 事件

5.4 reset事件和submit事件

1.1 HTML事件处理（这种不用知道就行）

　　6/7/8/9的区别：mouseenter/mouseleave 与mouseover/mouseout

　Event对象：

　五、事件类型之表单事件