Javascript 获取数组中最大和最小值

2/7/2021 Javascript

# vue 中实现

大家都知道,vue 中在事件处理程序中提供了事件修饰符

  1. stop
  2. prevent
  3. once
<a v-on:click.stop="doThis"></a>

<form v-on:submit.prevent="onSubmit"></form>

<a v-on:click.once="doThis"></a>
1
2
3
4
5

阻止事件继续传播(事件冒泡),在原生 js 中调用 event.stopPropagation() 阻止默认事件,在原生 js 中调用event.stopPropagation() 那么问题来了,通过 once 修饰符号,只能允许事件触发一次,那在 javaScript 中是怎么实现呢

# javaScript 实现

  1. 介绍:绑定事件是通过 addEventListener()实现,当触发相应事件时候,指定的回调函数会只想
  2. 语法:
target.addEventListener(type, listener, options)
1
  1. 参数介绍

(1)type:监听事件类型的字符串

(2) listener: 事件,为实现了 EventListener 接口的对象,或者是一个函数

(3) options:一个指定 listener 属性的对象,属性可选,可选值如下

  • capture: Boolean,表示在该类型的事件捕获阶段传到该 eventTarget 时候触发
  • once: Boolean,表示在添加之后最多只调用一次,如果为 true,listener 会在被调用之后自动移除
  • passive: Boolean, 设置为 true,表示 listener 永远不会调 preventDefault()
  • mozSystemGroup:只能在 XBL 或者是 Firefox' chrome 使用,这是个 Boolean,表示 listener 被添加到 system group。

举个例子 🌰: 点击该按钮只会弹出一次,通过控制台可以看到 btn 元素上面有事件,触发之后该事件已经被移除

<div id="btn">按钮</div>
<script>
    let btn = document.getElementById('btn')
    function test() {
        alert('点击btn')
    }
    btn.addEventListener('click', test, { once: true })
</script>
<style>
    #btn {
        width: 40px;
        height: 30px;
        line-height: 30px;
        background-color: cornflowerblue;
        text-align: center;
        cursor: pointer;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
触发前

触发前

触发后

触发后

上次更新: 4/12/2021, 3:23:17 PM