js-----鼠标事件

最新推荐文章于 2024-09-12 16:31:59 发布

小呆丶

最新推荐文章于 2024-09-12 16:31:59 发布

阅读量185

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_41192383/article/details/86569283

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Keywords" content="" />
        <meta name="description" content="" />
        <title>事件</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
 
            #box {
                width: 300px;
                height: 300px;
                background: skyblue;
            }
        </style>
    </head>
<body>
 
    <div id="box"></div>
 
<script>
    
    var box = document.getElementById("box");
 
 
    // 单击事件
    box.onclick = function() {
        alert("我被单击啦！");
    }
 
    // 鼠标划入  onmouseenter / onmouseover  鼠标划入事件
    box.onmouseover = function() {
        console.log("鼠标划入！");
    }
 
    // 鼠标划出  onmouseleave / onmouseout  鼠标划出事件
    box.onmouseout = function() {
        console.log("======划出======");
    }
 
    // 鼠标移动  onmousemove
    
    // 左键双击  ondblclick
    
    // 键盘按下某键  onkeydown
    
    // 键盘抬起某键  onkeyup
    
    // 失去焦点      onblur
    
    // 得到焦点      onfocus
    
    // 窗口大小被改变 onresize
    
 
    window.onresize = function() {
        console.log("窗口大小被改变啦！");
    }
 
    
 
</script>
</body>
</html>