js事件入门（2）

作者: 螺钉课堂 | 来源:发表于2019-12-17 16:01 被阅读0次

js事件入门（2）
Node.js核心入门（二）
事件
01vue-安装vue
《Oracle Java SE编程指南》23-08：事件监听
js事件入门（1）
js事件入门（3）
js事件入门（4）
js事件入门（5）
js事件入门（6）

2.鼠标事件

鼠标事件就是用户与页面的许多交互时通过鼠标移动或者鼠标点击等触发的事件.

#2.1.onmousedown

鼠标按下的时候触发的事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                //获取到div对象
                var oDiv = document.getElementById('box');
                //oDiv的鼠标按下事件发生后，弹出一个1
                oDiv.onmousedown = function(){
                    //这里弹出一个1就是事件发生后对应的操作
                    alert(1);
                }
            }
        </script>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
      <div id="box"> </div>
    </body>
</html>

#2.2.onmouseup 鼠标抬起事件

当鼠标按下后抬起的时候发生的事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                //获取到div对象
                var oDiv = document.getElementById('box');
                //oDiv的鼠标抬起事件发生后，打印出一个2
                oDiv.onmouseup = function(){
                    //这里打印出一个2就是事件发生后对应的操作
                    console.log(2);
                }
            }
        </script>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
      <div id="box"> </div>
    </body>
</html>

#2.3.onmousemove 鼠标移动事件

当鼠标移动的时候发生

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                //获取到div对象
                var oDiv = document.getElementById('box');
                //oDiv的鼠标移动事件发生后，打印出3
                oDiv.onmousemove = function(){
                    //这里打印出一个3就是事件发生后对应的操作
                    console.log(3);
                }
            }
        </script>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
      <div id="box"> </div>
    </body>
</html>

#2.4.onmouseover 鼠标移入事件

当鼠标移入的时候触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                //获取到div对象
                var oDiv = document.getElementById('box');
                //oDiv的鼠标移入事件发生后，打印出4
                oDiv.onmouseover = function(){
                    //这里打印出一个4就是事件发生后对应的操作
                    console.log(4);
                }
            }
        </script>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
      <div id="box"> </div>
    </body>
</html>
注意：这里的代码虽然和鼠标移动事件差不多，但是产生的效果不一样，鼠标移入div 只打印出1个值 
鼠标在div上移动的话 会打印出n个值

#2.5.onmouseout 鼠标移出事件

当鼠标移出对象的时候触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                //获取到div对象
                var oDiv = document.getElementById('box');
                //oDiv的鼠标移出事件发生后，打印出5
                oDiv.onmouseout = function(){
                    //这里打印出一个5就是事件发生后对应的操作
                    console.log(5);
                }
            }
        </script>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
      <div id="box"> </div>
    </body>
</html>

#2.6.onclick 鼠标单击事件

当鼠标单击的时候触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                //获取到div对象
                var oDiv = document.getElementById('box');
                //oDiv的鼠标按下事件发生后，打印出6
                oDiv.onclick = function(){
                    //这里打印出一个6就是事件发生后对应的操作
                    console.log(6);
                }
            }
        </script>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
      <div id="box"> </div>
    </body>
</html>

#2.7.ondblclick 鼠标双击事件

当鼠标双击的时候触发

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function(){
                //获取到div对象
                var oDiv = document.getElementById('box');
                //oDiv的鼠标双击事件发生后，打印出一个7
                oDiv.ondblclick = function(){
                    //这里打印出一个1就是事件发生后对应的操作
                    console.log(7);
                }
            }
        </script>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
    </head>
    <body>
      <div id="box"> </div>
    </body>
</html>

#2.8.综合实例1

image

综合实例1代码实现:
//具体样式没有实现，js部分只是实现其移入移出效果
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #wrap{
                width: 200px;
                margin: 0 auto;

            }
            #wrap a{
                text-decoration: none;

            }
            ul{
                margin-top: 10px;
                padding: 0;
                border: 1px solid #ccc;
                display: none;
            }
            ul li{
                list-style: none;
                height: 35px;
                line-height: 35px;
            }
            ul li:nth-of-type(3),ul li:nth-of-type(6){
                border-bottom: 1px solid #999;
            }
            ul li:nth-of-type(7){
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                //找到box和list对象
                var oBox = document.getElementById("wrap");
                var oList = document.getElementById('list');
                oBox.onmouseover = function(){
                    //鼠标移入显示
                    oList.style.display = "block";
                }
                oBox.onmouseout = function(){
                    //鼠标移出消失
                    oList.style.display = "none";
                }
            }
        </script>
    </head>
    <body>
        <div id="wrap">
            <a href="">个人中心</a>
            <ul id="list">
                <li>@我的</li>
                <li>评论</li>
                <li>赞</li>
                <li>私信</li>
                <li>未关注人私信</li>
                <li>群通知</li>
                <li>消息设置</li>
            </ul>
        </div>
    </body>
</html>

螺钉课堂视频课程地址：http://edu.nodeing.com

js事件入门（2）
2.鼠标事件鼠标事件就是用户与页面的许多交互时通过鼠标移动或者鼠标点击等触发的事件. #2.1.onmoused...
Node.js核心入门（二）
目录：Node.js核心入门(一) 全局对象常用工具事件机制 Node.js核心入门（二）文件系统访问 HT...
事件
1、鼠标的移入移除js部分 2、鼠标事件js部分 3、事件对象js部分 4、键盘事件js部分 5、输入框事件js部...
01vue-安装vue
资源 1.Vue.js2.0从入门到放弃---入门实例（一）2.Vue.js入门学习（一）3.Vue官方中文Api...
《Oracle Java SE编程指南》23-08：事件监听
内容导航：前言 2、事件处理快速入门 Swing事件监听快速入门 GUI事件监听器解释Java中的事件授权处理...
js事件入门（1）
1.事件相关概念 1.1 什么是事件？事件是用户在访问页面时执行的操作，也就是用户访问页面时的行为。当浏览器探测...
js事件入门（3）
3.键盘事件 #3.1.onkeydown 键盘按下事件当键盘按下的时候触发 #3.2.onkeyup 键盘抬起...
js事件入门（4）
4.表单事件表单事件处理主要用来验证表单，可以处理用户在表单上所做的任何操作。 #4.1.onsubmit事件 ...
js事件入门（5）
5.窗口事件 #5.1.onload事件元素加载完成时触发,常用的就是window.onload #5.1.re...
js事件入门（6）
7.事件冒泡机制 #7.1.什么是事件冒泡当一个元素接收到一个事件以后，会将事件传播给它的父级元素，它的负级元素...