Web前端开发笔记56——节流阀（互斥锁）、事件处理、事件对象

最新推荐文章于 2024-05-09 22:03:31 发布

原创最新推荐文章于 2024-05-09 22:03:31 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

#Web前端开发入门专栏收录该内容

57 篇文章

订阅专栏

本文介绍了JavaScript中的事件处理，包括单事件注册、多事件注册和事件委派，强调了使用`on`方法进行事件绑定的优势，特别是对于动态元素的事件添加。还提到了事件解绑、一次性触发的`one()`方法以及如何触发事件。此外，讨论了`trigger`和`triggerHandler`的区别，特别是在处理默认事件时的行为。最后，事件对象在事件触发过程中的作用也被提及，强调了性能优化的重要性。

1.我们在执行某些动作的时候，可能会触发多个方法，此时我们就要用到节流阀。这和我们之前原生JS中所说的一样，设置一个flag，不过如何开关，什么时候开关是我们需要关注的，我们一般可以用到动画执行完毕回调函数，即animate（fn(){}）中的函数方法。就可以防止多方法触发的情况。

2.单事件注册：

3.多事件注册：

<div>clickme</div>
<script>
    $("div").on({
        mouseover: function () {
            console.log(1)
            $(this).stop().animate({
                width: 200,
                height: 100
            })
        },
        mouseout: function () {
            console.log(1)
            $(this).stop().animate({
                width: "100px",
                height: "50px"
            })
        }
    })
</script>

多事件绑定处理示例，大家可以试一试。

同样如果相同时给不同的事件绑定同一个方法，我们可以这样写：

4.事件委派：

第二个参数是重点，即选中类型的子类元素。我们可以这样来圈中父类，而不需要用隐式迭代来直接给子类嵌套click事件。

不过，通过文档我们还是可以看到一些绑定事件的方法，比如bind、live、delegate不过都比较老了，我们提倡使用on来代替他们。

5.on的最强优势：给我们的动态元素进行事件添加。

5.解绑事件：

详细用法如下：

6.只会触发一次的事件绑定one（）。

7.自动触发事件绑定，含trigger。

<div class="div1">这是一个div</div>
<script>
    $(".div1").on({
        click: function () {
            alert('1')
        },
        mouseover: function () {
            alert(1)
            $(this).css({
                background: "red"
            })
        }
    })
    // $(".div1").click()
    // $(".div1").trigger("mouseover")
    // 这个方法可以不触发默认事件而执行方法
    $(".div1").triggerHandler("mouseover")
</script>

上面是示例，大家可以试一试。

需要注意的是，当我们使用triggerHander的时候，是不会触发默认事件的。比如input组件当focus触发时，即获取焦点时，trigger方法会有光标闪烁，而triggerHander不会有。

8.事件被触发，就会有事件对象的产生。