js鼠标事件

最新推荐文章于 2024-08-11 09:55:43 发布

sunset0827

最新推荐文章于 2024-08-11 09:55:43 发布

阅读量799

点赞数

分类专栏： JS学习文章标签： js js添加标签点击事件

本文链接：https://blog.csdn.net/Mr_Sunset/article/details/81175303

版权

JS学习专栏收录该内容

32 篇文章 0 订阅

订阅专栏

贴代码和效果比较直观,实现点击切换颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #btn1{
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: skyblue;
            /* 元素中文本不可选中 */
            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            cursor: pointer;
            box-sizing: border-box;
            display: inline-block;
        }
        #btn1:hover{
            border: 1px solid red;
        }
        #btn2{
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: yellow;
            /* 元素中文本不可选中 */
            user-select: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            cursor: pointer;
            box-sizing: border-box;
            display: inline-block;
        }
        #box{
            width: 200px;
            height: 150px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <!-- 页面中某个事件发生时,捕获这个事件并执行一段代码,叫做事件监听 -->
    
    <!-- 监听某个元素的事件,可以为这个元素标签添加onxxxx属性,xxxx表示要坚挺的事件类型,属性的值就是要执行的js代码 -->
    <!-- onclick表示鼠标左键单击事件 -->
    <!-- <div id="btn1" onclick="alert('蓝色');">蓝色</div> -->

    <!-- 如果事件对应的代码只有一行，可以直接写在属性值中，如果事件对应的代码非常复杂，则可以把这段代码写成一个函数，写在js代码中，然后事件代码中调用这个函数 -->
    <!-- 给时间绑定事件函数时，可以传递一个全局对象event作为参数 -->
    <!-- event是一个对象，里面存储着本次事件的详细信息 -->
    <div id="btn1" onclick="btn1Click(event)">蓝色</div>
    <div id="btn2" onclick="btn1Click(event)">黄色</div>
    <div id="box"></div>



<script>
    // event,事件,表示某件事情发生了,例如,鼠标点击,键盘点击,窗口尺寸发生变化,网络请求完成等,前端开发属于事件驱动式开发,程序的主要任务就是针对不同的事件做出不同的响应,例如,按下按钮之后执行什么,按下回车之后执行什么

    // 元素标签属性绑定的函数，必须是全局域中的函数
    var box = document.getElementById("box");
    function btn1Click(e){
        console.log(e);
        // e是事件对象，记录这次本次事件的详细信息
        // e.target表示触发本次事件的元素

        if(e.target.id == "btn1"){
            box.style.backgroundColor = "skyblue";
        }
        else{
            box.style.backgroundColor = "yellow";
        }
    }
    // 给多个按钮绑定事件函数时，可以绑定为同一个函数，在函数中通过e.target区分是哪个按钮点击的
    // 也可以给这些按钮分别绑定不同的函数

    // --------------------------------------------------


    // 给元素添加时间监听的另一种方法：
    // 通过元素对象添加事件监听，元素对象可以是从DOM中查找的，也可以是创建的

    var btn = document.createElement("button");
    btn.textContent = "通过js添加的按钮";
    document.body.appendChild(btn); 
    // 可以通过元素对象为这个元素添加事件监听,格式为:
    // 元素对象.xxxx = 事件函数
    // xxxx是监听的事件类型,事件函数一般写为匿名函数,当元素触发这个事件时,事件函数就会被执行,自动传递event对象
    btn.onclick = function(e){
        alert("你好");
    }

</script>
</body>
</html>