vue 自定义事件调度处理功能

更新日期: 2020-05-21阅读: 3.1k标签: 事件

vue 的 emit 和mixins 两个特性是这篇文章的基础,当然抛开vue 也可以直接使用全局调用实现,所以这块不做讨论

先看效果,合并一个mixin 然后就可以处理事件监听了


step 1、编写一个简单mixin 实现事件接收调度处理管理功能

export default {
  created() {
    //定义一个自定义事件 toLowerCase 是为了躲避vue的坑
    this.$on("NotifyChildComReSize".toLowerCase(), this.EVENT_RESIZE_HANDLE);
  },
  data() {
    return {
      events: new Map(),//这里监听自定义事件和回调函数
      EVENT_RESIZE: "EVENT_RESIZE"//事件监听名称 类似 CLICK
    }
  },
  methods: {
    //这是一个 resize 事件的调度处理函数
    EVENT_RESIZE_HANDLE(size) {
      //获取已经注册的监听事件
      let resizeFunS = this.events.get(this.EVENT_RESIZE);
      if (Array.isArray(resizeFunS)) {
        resizeFunS.forEach(func => {
          func.call(this, size);//直接回调 并把 通过自定义事件得到的size 回传给回调函数
        })
      }
    },
    //添加一个事件监听
    addEvent(eventName, func) {
      let targetEventFunS = this.events.get(eventName);
      targetEventFunS = targetEventFunS ||[];
      targetEventFunS.push( func);
      this.events.set(eventName,targetEventFunS);
    },
    //注销事件所有监听
    offEvent(eventName) {
      this.events.set(eventName, []);
    }
  }, destroyed() {
    //销毁一个自定义事件
    this.$off("NotifyChildComReSize".toLowerCase(), this.EVENT_RESIZE_HANDLE);
  }
}

step 2、原始事件触发,可以在任意一级父组件里通过 自己实现动态计算监听组件的大小变化,这块是功能驱动的基础,此处只是抛砖引玉,当然你可以把他设计为一个怪兽被秒掉的通知,也可以设计成你每100万个用户注册成功的通知,实现逻辑由您定

   listenComResize() {
        let intervalTime = 1000;//检测和通知时间间隔,为了避免resize过程中的连续变化导致连续调用
        this.clientHeight = this.$el.parentNode.clientHeight;
        this.scrollHeight = this.$el.parentNode.scrollHeight;
        this.refreshSetInterval = setInterval(() => {
          this.clientHeight = this.$el.parentNode.clientHeight;
          this.scrollHeight = this.$el.parentNode.scrollHeight;
          let clientHeight = this.$el.parentNode.clientHeight;
          let clientWidth = this.$el.parentNode.clientWidth;
          let curTime = new Date().getTime();

          //判断  【(curTime - this.refreshTime) > intervalTime】这句是为了避免通知太过频繁
          if (this.lastHeight != 0 && this.lastWidth != 0 && (clientHeight != this.lastHeight || clientWidth != this.lastWidth) && (curTime - this.refreshTime) > intervalTime) {
           
            this.lastHeight = clientHeight;
            this.lastWidth = clientWidth;
            this.refreshTime = curTime;
            //这块####很~!!重要!!!!@@  ->>>通知到>>>>>>>Mixin
            this.$emit("NotifyChildComReSize".toLowerCase())

          } else if (clientHeight != this.lastHeight || clientWidth != this.lastWidth) {
            this.lastHeight = clientHeight;
            this.lastWidth = clientWidth;
          }
          this.clientHeight = Math.floor(this.clientHeight - 1);
        }, intervalTime);
        this.clientHeight = Math.floor(this.clientHeight - 1);
      }

    },

step 3:注册事件 ,并处理监听

export default {
   mixins:[comEvent],//合并mixin 得到事件监听处理的通知
   mounted(){
     this.addEvent(this.EVENT_RESIZE,this.resizeCall);//注册一个resize事件
   },
   methods:{
     resizeCall(size){
        console.log(size);//输出获得的值
     },
     offResizeCall(){
        this.offEvent(this.EVENT_RESIZE,this.resizeCall);//注销resize事件
     }
   }
}

链接: https://fly63.com/article/detial/9190

js中addEventListener事件监听器参数详解

我们都知道addEventListener() 的参数约定是:useCapture是可选参数,默认值为false,目前DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了。passive就是告诉浏览器我可不可以用stopPropagation...

js监听浏览器返回,pushState,popstate 事件,window.history对象

在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。

CSS中的pointer-events属性实现点穿效果

具有层级关系的结构中,使用了pointer-events:none 属性将会使当前元素中的事件不会被捕获,从而实现了点穿的效果。而当代码示例中假如top元素具有子元素且显示指定pointer-events属性不为none的时候,top元素注册的事件将会被捕获/冒泡触发

js鼠标事件参数,获取鼠标在网页中的坐标

事件对象 event,JavaScript 将事件event作为参数传递,IE中把 event 事件对象作为全局对象 window 的一个属性,获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标

js事件冒泡和默认事件处理(原生js、vue)

何为默认事件?比如 a 会跳转页面,submit 会提交表单等。普通js方法:e.preventDefault()函数。Vue.js方法: .prevent 是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件

js keyup、keypress和keydown事件 详解

js keyup、keypress和keydown事件都是有关于键盘的事件,当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件。

深入nodejs-核心模块Events详解(事件驱动)

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型,使其轻量又高效。比如,文件操作中的fs事件流,网络编程所用到的tcp,http模块等,当你回想自己写的程序后,会发现很多操作都基于事件驱动,Events类。

纯CSS实现点击事件展现隐藏div菜单列表/元素切换

在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记:实现原理利用CSS伪类:target

关于鼠标移动太快导致moseleave事件不触发的问题

我做的是一个table的编辑功能,当移入某行的时候展示编辑状态,在移出某行的时候显示的是原始状态,此时遇到一种情况,就是.当mousenter事件触发之后,由于鼠标移动得太快,同一个tr上绑定的mouseleave事件压根儿就没有执行。

Js事件传播流程

js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!