JavaScript中的事件-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_79542525/article/details/137745500

网页中的每个元素都可以产生某些事件。

比如：

当用户单击按钮时，就发生⼀个鼠标单击（onclick）事件。

当用户点击提交按钮时，就发生⼀个提交数据（onsubmit）事件。

事件是可以被侦测到的行为。每个元素都可以产⽣某些可以触发JavaScript函数的事件。

javaScript中的常用事件：

事件	说明
onload	页面加载完成后触发该事件(window对象事件)
onscroll	当滚动条滚动时触发该事件(window对象事件)
onresize	当页面尺寸发生变化时触发该事件(window对象事件)
onclick	鼠标单击时触发该事件
onmouseover	鼠标移入到指定对象上时触发该事件(鼠标悬停)
onmouseout	鼠标从指定对象上移出时触发该事件(鼠标移出)
onmousemove	鼠标在指定对象上移动式触发该事件(鼠标移动，会触发多次)
onfocus	对象获得光标(焦点)时触发该事件
onblur	对象失去光标(焦点)时触发该事件
onselect	当文本框或文本域中的文字被选中时触发该事件
onchang	当文本框或文本域中的文字被改变时触发该事件
onkeydown	当按下键盘上的按钮时触发该事件(document对象事件)
onkeyup	当释放键盘上的按钮时触发该事件(document对象事件)
onkeypress	onkeydown+onkeyup(document对象事件)
oncontextmenu	鼠标右键菜单事件

JavaScript中绑定事件方式

在javaScript中，给DOM元素绑定事件有三种⽅式：侵入式、绑定式、监听函数式。

1.侵入式事件方式

将javaScript事件直接写在html标签中

<div onclick="add()">点我</div>
<script>
   //事件处理函数
   function add(){
       console.log('点击了div对象');
   }
</script>

注意：此种方式的缺点为:javascript事件与HTML代码混杂在一起

2.绑定式事件方式

通过DOM对象，使⽤javaScript代码绑定⼀个事件

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="one">hello</div>
        <script>
            let obj = document.getElementById('one');
            //方法一
            // obj.onclick = function(){
            //     alert("hello");
            // }
            //方法二
            function handler(){
                alert('hello');
            }
            obj.onclick = handler;
            //onclick函数的事件指向handler
            //如果handler后面加括号，则事件立刻执行
        </script>
    </body>
</html>

3.监听函数式事件方式

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="one">hello</div>
        <script>
            let obj = document.getElementById('one');
            obj.addEventListener('click',handler)//add添加，event事件，listener监听
            function handler(){
                alert('hello');
            }
        </script>
    </body>
</html>

补充:可以在addEventListener第二个参数的位置上时直接定义一个函数

优点:可以动态的判断要绑定什么事件

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <div id="one">hello</div>
        <script>
            let str = 'click';
            let obj = document.getElementById('one');
            obj.addEventListener(str,handler)//add添加，event事件，listener监听
            function handler(){
                alert('hello');
            }
        </script>
    </body>
</html>

补充：

HTML负责内容，CSS负责样式，JS负责行为

事件对象-event

event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

属性	说明
clientX	获取相对于可视区域内鼠标的X坐标
clientY	获取相对于可视区域内鼠标的Y坐标
offsetX	获取相对于触发事件对象上鼠标的X坐标
offsetY	获取相对于触发事件对象上鼠标的Y坐标
cancelBubble	阻止事件冒泡
preventDefault	阻止默认行为
keyCode	获取用户按键值
target	当前事件对象

offsetX、offsetY获取鼠标坐标

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: blue;
            margin: 50px 100px;
        }
    </style>
    <body>
        <div id="one"></div>
        <script>
            let obj = document.getElementById('one');
            //运行时会自动为事件函数注入一个对象
            obj.onmousemove = function(event){
                console.log(event.clientX+','+event.clientY);
                console.log(event.offsetX+','+event.offsetY);
            }
        </script>
    </body>
</html>

keyCode获取键盘输入

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="one"></div>
        <script>
            let obj = document.getElementById('one');
            //运行时会自动为事件函数注入一个对象
           document.onkeydown = function(event){
            console.log(event.keyCode);
           }
        </script>
    </body>
</html>

当键盘按下相应的按钮，在控制台中就会将其相应的ASCII码值打印出来

事件冒泡与事件捕获

在页面上的⼀块可视区域中，其中可能会包括父元素可视区域与子元素可视区域。

此时，如果用户触发了子元素的某个事件，而父元素也具有相同的事件，那么事实上，我们并不能确定：用户到底是想触发子元素事件，还是想触发父元素事件。

解决这个问题的思路是：设计两种事件流：

事件冒泡

1.当用户触发了子元素事件时，先触发子元素事件，再触发父元素事件。这就是事件冒泡。（默认）

<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            div{
                width: 400px;
                height: 300px;
                background-color: blue;
            }
            p{
                width: 200px;
                height: 150px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <p></p>
        </div>
        <script>
            let obj = document.getElementsByTagName('div')[0];
            let pobj = obj.getElementsByTagName('p')[0];
            obj.onclick = function(){
                console.log('父元素点击事件');
            }
            pobj.onclick = function(){
                console.log('子元素点击事件');
                event.cancelBubble = true;
            }
        </script>
    </body>
</html>

阻止事件冒泡:event.cancelBubble = true;

因为冒泡事件是子元素冒泡给了父元素，因此阻止事件冒泡的语句应该写在子元素中

事件捕获

2.当用户触发了子元素事件时，先触发父元素事件，再触发子元素事件。这就是事件捕获。

preventDefault()阻止浏览器默认行为

浏览器默认行为举例:鼠标右键后出现的菜单

默认行为：在某些事件中，浏览器内置了⼀些默认的功能。如：单击鼠标右键会弹出菜单、提交按钮默认提交动作、按下字母键会输入⼀个字母等。

如果这些默认行为不能满足我们需要的功能，那么可以阻止默认行为，重写我们希望的行为。阻止默认行为很简单，在事件处理函数中调用preventDefault方法即可。阻止默认行为: event.preventDefault();

<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            
        </style>
    </head>
    <body>
        <ul>
            <li>右键菜单1</li>
            <li>右键菜单2</li>
            <li>右键菜单3</li>
            <li>右键菜单4</li>
        </ul>
        <script>
            // document.oncontextmenu = function (){
            //     alert('1111');
            //     //在显示了我们的弹窗后，有显示了表单，因为显示表单为默认行为

            //     //禁用默认行为
            //     //preventDefault()是一个方法，不是一个事件
            //     event.preventDefault();
            // }

            //编写自己的右键菜单
            let ulObj = document.getElementsByTagName('ul')[0];
            ulObj.style.display = 'none';

            document.oncontextmenu = function(){
                ulObj.style.display = 'block';
                event.preventDefault();
            }
            ulObj.onclick = function (){
                //js中this代表当前对象
                this.style.display = 'none';
            }
        </script>
    </body>
</html>

使自定义的菜单位置与鼠标相同

<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            ul{
                width: 100px;
                height: 200px;
                background-color: #AEAEAE;
                border: black solid 1px;
                display: none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>右键菜单1</li>
            <li>右键菜单2</li>
            <li>右键菜单3</li>
            <li>右键菜单4</li>
        </ul>
        <script>
            //编写自己的右键菜单
            let ulObj = document.getElementsByTagName('ul')[0];

            document.oncontextmenu = function(event){
                ulObj.style.display = 'block';
                ulObj.style.marginLeft = event.clientX+'px';
                ulObj.style.marginTop = event.clientY+'px';
                event.preventDefault();
            }
            ulObj.onclick = function (){
                //js中this代表当前对象
                this.style.display = 'none';
            }
        </script>
    </body>
</html>