css事件，定时器，防抖，节流

最新推荐文章于 2024-03-19 16:16:50 发布
最新推荐文章于 2024-03-19 16:16:50 发布
阅读量467 收藏 1
点赞数
分类专栏： 转前端(html+css+js) 文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52563729/article/details/127192499
版权

鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="btn1">单击</button>
    <button id="btn2">双击</button>
    <button id="btn3">鼠标按下</button>
    <button id="btn4">鼠标抬起</button>

    <div id="btn5" class="box1"></div>

    
    <script>
        var btn1=document.getElementById("btn1");
        var btn2=document.getElementById("btn2");
        var btn3=document.getElementById("btn3");
        var btn4=document.getElementById("btn4");
        btn1.onclick = function(){
            console.log("单击事件");
        }

        btn2.ondblclick = function(){
            console.log("双击事件");
        }

        btn3.onmousedown = function(){
            console.log("鼠标按下");
        }

        btn4.onmouseup = function(){
            console.log("鼠标抬起");
        }
        btn5.onmousemove = function(){
            console.log("鼠标移动了");
        }
        btn5.onmouseenter=function(){
            console.log("鼠标进入事件");
        }
        btn5.onmouseleave=function(){
            console.log("鼠标离开事件");
        }
        btn5.onmouseover=function(){
            console.log("鼠标over事件");
        }
        btn5.onmouseout=function(){
            console.log("鼠标out事件");
        }

        /*
        over和out的区别

        enter和leave的区别

        over和out进入和离开子节点的时候会触发
        */
    </script>
</body>
</html>

在这里插入图片描述

dem0事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">按钮</button>

    <script>
        //优点，分离js和html
        //缺点，会覆盖第一个
        var tt=document.getElementById("btn")
        tt.onclick=function()
        {
            console.log('点击了按钮1');
        }
        tt.onclick=function()
        {
            console.log('点击了按钮2');
        }
    </script>
</body>
</html>

dem2事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="but">按钮</button>

    <script>
        var bt=document.getElementById("but");
        //这里的click是代表事件类型
        //优点，可以触发多个东西
        //缺点写起来麻烦
        bt.addEventListener("click",function(){
            console.log("点击了1");
        })
        bt.addEventListener("click",function(){
            console.log("点击了2");
        })
    </script>
</body>
</html>

html事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="fun()">按钮</button>
    <script>
        //html事件缺点，html和js没有分开，html里面有js的代码
        function fun()
        {
            console.log("点击了按钮");
        }
    </script>
</body>
</html>

event事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <button id="btu">按钮</button>
    <a href="https://www.baidu.com" id="it">dianwo</a>


    <div class="box1" id="b1"><div class="box2" id="b2"></div></div>

    <script>
        //事件发生后会产生一个事件对象,作为参数传给监听函数

        var btn = document.getElementById("btu")
        //对象属性:1.event.target(点击后改变的值) 2.event.type(知道点击的类型)
        btn.onclick=function(event){
            console.log(event.target);
            event.target.innerHTML="点击之后"
            console.log(event.type);
        }

        //常用的方法
        //1.preventDefault,取消浏览器的默认行为
        //2.stopPropagation,阻止事件冒泡，什么是元素冒泡，元素重叠的时候会点击子元素父元素也会发生！
        var it=document.getElementById("it")
        it.onclick=function(e){
            e.preventDefault();
            console.log("点击了A");
        }

        var b1=document.getElementById("b1")
        var b2=document.getElementById("b2")
        b1.onclick=function(e){
            e.stopPropagation()
            console.log("点击了b1");
        }
        b2.onclick=function(e){
            console.log("点击了b2");
        }


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

键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        1.keydowm按下键盘时触发
        2.keypress按下有值的时候触发，ctrl，alt，shift，meta这四个就是无值得键
        对于有值得键，我们先触发keydown再触发这个事件
        3.keyup松开得时候触发
    -->


    <input type="text" id="username">

    <script>

        var username=document.getElementById("username");
        username.onkeydown=function(e){
            console.log(e.target.value);
            //这个value属性就是输入框得数据
        }



        //按下什么案件我们通过唯一标识来知道，keyCode代表每个键盘的唯一数字
        username.onkeydown=function(e){
            if(e.keyCode==13)
            {
                console.log("这是回车");
            }
            //这个value属性就是输入框得数据
        }
    </script>

</body>
</html>

表单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="text" id="username">

    <form id="myfrom" onsubmit="sub" action="服务器地址">
        <input type="text" name="username">
        <button id="resetbtn">重置</button>
        <button id="tj">提交</button>
    </form>

    <script>
        //input
        var username=document.getElementById("username")
        username.oninput=function(e){
            console.log(e.target.value);//一边输入一边得到
        }

        //select选中类容的时候触发事件
        username.onselect=function(e){
            console.log("选中了");
        }

        //change事件，和input差不多，失去焦点和回车触发

        //reset事件和submit事件，是直接添加到<from>对象上,而不是发生在表单的成员上
        //reset再表单重置时候触发,所有表单成员变为默认值得时候触发

        var res=document.getElementById("resetbtn")
        var myf=document.getElementById("myfrom")
        res.onclick=function()`在这里插入代码片`
        {
            myf.reset();
        }
        //submit是向服务器发数据得时候触发

        function submitHandle()
        {
            console.log("想做得事情");
        }
    </script>
</body>
</html>

定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //延时执行,
        var t=setTimeout(function(){
            console.log("大家好");
        },3000)
        //注意，如果回调函数是对象的方法，那么settimeout使得方法内部的this关键字指向全局环境，而不是定义时所在的那个对象
        var name=2
        var user={
            name  :1,
            getname:function(){
                setTimeout(function(){
                    console.log(this.name);
                },1000)
            }
        }
        user.getname();

        clearTimeout(t);//直接取消定时器，不会答应！！！！！！


        //setinterval，每间隔多久执行一次，与上面完全一致，可以实现动画！！！

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

防抖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3{
            height: 400px;
        }
    </style>
</head>
<body>
    <h3>hhh</h3>
    <h3>hhh</h3>
    <h3>hhh</h3>
    <h3>hhh</h3>
    <h3>hhh</h3>


    <script>
        window.onscroll=debounce(scrollHandle,2000)
        function scrollHandle(){
            var top=document.documentElement.scrollTop;
            console.log(top);
        }
        //一个函数执行频率太高了我们就需要防抖，隔一段事件执行一次
        /*
        1.设置时间内没有再次触发事件，那么就执行这个函数
        2.设置时间内再次出发滚动事件，那么就取消计时器
        效果:短时间内大量执行同一函数只会执行一次
        */
       function debounce(fn,delay){
        var time=null
        return function(){
            if(time){
                clearTimeout(time)
            }
            time=setTimeout(fn,delay)
        }
       }

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

节流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3{
            height: 400px;
        }
    </style>
</head>
<body>
    <h3>hhh</h3>
    <h3>hhh</h3>
    <h3>hhh</h3>
    <h3>hhh</h3>
    <h3>hhh</h3>


    <script>

        //为了让用户不停的动也能实现功能

        function jieliu(f,delay){
            var time=true;
            return function(){
                if(!time){
                    return false
                }
                time=false
                setTimeout(function(){
                    f();
                    time=true
                },delay)
            }
        }


        window.onscroll=jieliu(scrollHandle,2000)
        function scrollHandle(){
            var top=document.documentElement.scrollTop;
            console.log(top);
        }
        /*
        1.搜索业务，每输入一次搜索一次————————节流
        2.渲染，停下来再渲染——————————防抖
        */
    </script>
</body>
</html>
pqxpq
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
还在用定时器吗？借助 CSS 来监听事件
不定时分享最优质的网络技术与教程，满满的干货。
12-25 206
以上就是你可能不需要定时器的几个替代方案，相比定时器而言，CSS 在控制定时器的开启和暂停上更有优势，下面总结一下:hover配合transition延时、监听可以实现鼠标经过延时触发效果:active配合transition延时、监听可以实现长按触发效果CSS 动画设置infinite后配合监听可以实现周期性触发效果可以直接通过:hover来控制台动画的暂停和播放当然，可以利用的不仅仅是以上几个案例，任何和 CSS 交互（:hover、:active。
超详细解释:使用定时器实现轮播图效果(HTML、CSS、JavaScript)
weixin_56296642的博客
10-02 1790
超详细解释使用HTML、CSS、Javascript运用定时器知识实现轮播图效果
还在使用定时器吗？有点离谱的 CSS 电子时钟
热门推荐
前端开发博客
05-07 1万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群通常要做一个时钟，肯定离不开 JS 定时器。今天换一种思路，用 CSS 来实现一个时钟，如下：Kapture 2022-03-04 at 16.28.36你也可以访问这个CSS time (codepen.io)[1]查看实际效果当然借用了一点点 JS 用于初始化时间，整个时钟的运行都是由 CSS 完成的，有...
CSS实现点击防抖
最新发布
weixin_42079403的博客
03-19 502
大家都知道，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。但是，我今天确新学了一招CSS实现点击节流，分享给大家~
JavaScript笔记12：控制CSS、事件、定时器
Lanhaorena的博客
10-21 481
目录 js控制css 其他样式相关属性 事件的冒泡 事件的委派 绑定多个响应函数 单个：“对象.事件 = 函数”单个 多个：addEventListener()方法 多个：attachEvent()函数绑定 兼容所有浏览器的版本 事件的传播 滚轮事件 键盘事件 浏览器对象模型BOM 定时器 js控制css // 语法： 元素.style.样式名 = 样式值 注意：在CSS中的样式名如果含有“-”，则这种名称在JS中是不合法的。则这种名称需要修改为驼峰命名.
还在用定时器吗？借助 CSS 来监听事件 - SegmentFault 思否
热爱科学、文人、计算机
12-18 189
还在用定时器吗？借助 CSS 来监听事件 - SegmentFault 思否
防抖和节流的定时器写法和时间戳写法详解
weixin_51938803的博客
07-13 324
防抖和节流的定时器写法和时间戳写法详解
纯CSS实现计时器
a_strong_pig的博客
12-06 259
纯CSS实现计时器效果
一文理解防抖与节流
zxdznyy的博客
08-08 1127
防抖与节流是前端面试的重难考点。希望在这篇博客我能把这两个概念讲清楚。当事件触发后，延迟几秒后再执行回调。如果在这n秒内事件又被触发，则重新计时，是不是会清晰许多。频繁触发，只触发一次综合上述实例，我们在玩游戏时英雄会有一定的技能冷却时间，从而减少了一段时间内事件的触发频率，而节流的理解则是减少事件的触发频率，有选择性执行一部分事件。这里先再次重复一下两者定义：防抖： 当事件触发后，延迟n秒后再执行回调，如果在这n秒内时间再次被触发，则重新计时。...
定时器实现防抖节流
Hyanl的博客
12-01 432
场景：点击按钮请求；搜索框输入查询，用户最后一次输入完，再发送请求。场景：监听滚动事件；搜索框，搜索联想功能。定义：在一段时间内只在最后一次触发方法。定义：在一段时间内，只会触发一次方法。
Css3实现无缝滚动防抖
11-19
问题
CSS鼠标响应事件经过、移动、点击示例介绍
09-05
本文为大家介绍下CSS 鼠标响应事件：鼠标经过CSS、鼠标移动CSS、鼠标点击CSS以及示例，喜欢的朋友可以参考下
js节流与防抖封装.html
04-17
js的节流与防抖的封装源码，用于学习.
CSS3鼠标悬停按钮动画事件
06-24
CSS3鼠标悬停按钮动画事件是一款用box-shadow属性制作多种按钮悬停动画效果。
防抖函数，定时的清除
趟过java，遇见web
08-03 253
清除定时，防抖，timer=null不能清除定时
第八节，改变元素css,设置定时器
daily886的博客
04-26 4544
Document <!-- 原本的 react package 被拆分为 react 及 react-dom 两个 package。其中 react package 中包含 React.createElement、 .createClass、 .Component， .PropTypes， .Children 这些 API，而 react-dom package 中包含 ReactDOM
利用css做时钟
m0_38038767的博客
05-06 1217
在网上看到的一种利用css3做出定时器的方式，就把他记录下来，偶尔可以翻出来看看。代码如下： html代码 <div class="timer"> <span class="hours"></span> <a class="split">:</a> <span class="minutes"></span> <a class="split">:</a> <
STM32下使用定时器来来解决机械按键抖动
weixin_53116997的博客
07-30 1245
在使用机械按键过程中，每当我们按下一次按键，可能不止有一次电平信号的变化，这会导致我们自己设计的程序在理想状态下是可行的，但真正使用时却会有这样那样的问题，而这一切问题的来源可能来自一个会抖动的机械按键，在我们按下时，因为反弹的原因，会导致电平信号的改变触发次数为两次以上，这显然是不行的，如何消除机械按键的抖动问题，在我看来，有三种方式，分别是：物理减震法、延时法、定时器触发法。
setTimeout不准时，CSS精准实现计时器功能
李刚的学习专栏
05-04 941
实际开发过程中，我们会经常遇到，首次进入页面进行相应提示，然后指定时间后自动消失或者前端时钟展示等需求。按照传统方案，我们可以使用 setTimeout 实现。但其存在：实际延时比设定值更久的情况。
定时器控制css动画
10-13
可以使用JavaScript中的setInterval()函数来控制CSS动画的定时器。具体实现方法是，在CSS中定义好动画效果，然后使用JavaScript获取需要控制的元素，通过修改元素的class属性来启动或停止动画。在启动动画时，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值