js鼠标事件

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

<!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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值