js怎么自定义事件，并能让用on事件监听

Posted 2023-04-07

你这个问题全部内容应该是如下吧：
在视频播放的时候，能够用on监听事件的触发,如下：

player.on('pause',function() console.log('视频暂停')；
)
player.on('ended',function() console.log('视频结束')
)

这个是什么原理，怎么自定义类似pause、ended的事件，并能够用on监听？麻烦指教
相当于来说你要维护一个事件队列。
player对象大概有这么些属性
on: func(key, callback),
emit: func(key),
events: object


events是一个对象，数据结构如下：
pause: [func, func]


调用on函数时，把event的key以及callback添加到events中。
调用emit函数表示相应事件触发，根据相应的key从events中获取相应的callback数组，依次执行函数。 参考技术A function 你的函数名字就可以了

自定义事件在 Vue.js 组件中的应用

 

​编辑

 

Vue.js 组件的自定义事件可以让子组件向父组件传递数据，非常方便实用。在使用自定义事件时，我们可以使用 v-on 来绑定事件，每个 Vue 实例都实现了事件接口，即使用 $on(eventName) 监听事件和使用 $emit(eventName) 触发事件。此外，在父组件中，我们可以使用 v-on 来监听子组件触发的事件。

下面是一个示例，子组件和它外部完全解耦，只需要触发一个父组件关心的内部事件：

Copy

<div id="app">
  <div id="counter-event-example">
    <p> total </p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
    <button-counter v-on:increment="incrementTotal"></button-counter>
  </div>
</div>

Copy

Vue.component(button-counter, 
  template: <button v-on:click="incrementHandler"> counter </button>,
  data() 
    return 
      counter: 0,
    ;
  ,
  methods: 
    incrementHandler() 
      this.counter += 1;
      this.$emit(increment);
    ,
  ,
);

new Vue(
  el: #counter-event-example,
  data: 
    total: 0,
  ,
  methods: 
    incrementTotal() 
      this.total += 1;
    ,
  ,
);

如果要监听某个组件的根元素上的原生事件，可以使用 .native 修饰 v-on。

另外，组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，可以通过 model 选项指定当前的事件类型和传入的 props。

以下是一个示例，父组件的 num 的初始值是 100，更改子组件的值能实时更新父组件的 num：

Copy

<div id="app">
  <kxdang-input v-model="num"></kxdang-input>
  <p>输入的数字为:num</p>
</div>

Copy

Vue.component(kxdang-input, 
  template: `
    <p>
      <input
        ref="input"
        :value="value" 
        @input="$emit(input, $event.target.value)"
      >
    </p>
  `,
  props: [value],
);

new Vue(
  el: #app,
  data: 
    num: 100,
  ,
);

总的来说，Vue.js 组件的自定义事件和 v-model 机制非常强大，能够让我们更加方便地进行组件间的数据交互。需要注意的是，在使用自定义事件时，我们应该避免出现命名冲突，以免产生不必要的错误。同时，在使用 v-model 时，我们也要注意传入的 props 和事件名的对应关系。