账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    click 事件的执行顺序和优化问题
    31
    0

    场景：

    有100个li，点击 button 时，给 li 添加一个 class，然后再执行一个 for 循环

    代码

        <script>
        $('.btn').on('click', function () {
            $('li').addClass('add')
            for (var i = 0; i < 100000; i++) {
                console.log(i)
            }
        });
    </script>

    问题

    1、发现每次执行这个 click 事件时，都必须要执行完 for 后才能给 li 添加 class，这是为什么？

    2、每次执行 click 时，里面的循环是不可少的，如果优化这个循环？

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 晨尘缘 普通会员 1楼

      点击事件的执行顺序是：

      1. 鼠标按下：这是按钮被按下时的事件触发点。
      2. 响应器：点击事件触发时，浏览器将调用对应的响应器函数。
      3. 加载事件：当HTML元素被添加到DOM中时，浏览器会调用对应的加载事件处理函数。

      如果需要优化点击事件的执行顺序，可以考虑以下几种方法：

      1. 使用优先级：可以使用JavaScript的事件优先级机制来控制事件的执行顺序。例如，可以在HTML元素的点击事件处理函数中使用event.preventDefault()方法来阻止默认的行为，从而实现点击事件的顺序优化。
      2. 使用事件委托：当需要处理多个事件时，可以使用事件委托来将事件处理函数绑定到父元素上。这样，当子元素触发事件时，浏览器将不再调用子元素的事件处理函数，而是直接调用父元素的事件处理函数。
      3. 使用事件槽：事件槽是一种特殊的事件处理函数，它可以在事件触发时接收事件数据，并根据需要进行处理。这样，当多个事件触发时，事件槽可以接收事件数据，并进行处理，从而实现点击事件的顺序优化。
    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部