zoukankan      html  css  js  c++  java
  • js自定义事件模式

    ---恢复内容开始---

      js事件用的最多的就是默认事件。不过有时候需要自定义事件来使用。

      参照默认事件的模式,例如click事件,鼠标点击dom,先触发click事件,然后执行dom上的事件处理程序。

    <p>点我</p>

    document.getElementByTagName('p')[0].addEventLisener('click',()=>{

      alert('click');

    })  

      同理,自定义事件也需要三个部分,即事件注册、事件触发、处理程序。

    这里使用原型方法做例:

    var ZdsEvent=function(){ //自定义事件对象
      return;
    };
    ZdsEvent.prototype={ //原型对象
      handles:{ //事件处理程序

      },
      on(zdsEvent,handle){ //事件注册
        if(!this.handles[zdsEvent]){
          this.handles[zdsEvent]=handle;
        }else{
          console.log('这个事件已经注册过了');
        };
      },
      emit(zdsEvent){ //事件触发
        if(this.handles[zdsEvent]){
          this.handles[zdsEvent]();
        }else{
          console.log('还没有注册这个事件呢');
        }
      }
    }
    var zds=new ZdsEvent();  //实例事件对象
    zds.on('con',()=>{ //注册一个打印内容事件
      console.log('第一个事件')
    });
    zds.emit('con');  //触发事件

    这就是一个自定义事件的最基本模式,还有一些其他的功能,如注销事件和一次性事件等,不过最基本的功能就是这样

  • 相关阅读:
    「Vue」nrm
    「Vue」路由
    「Vue」父子组件之间的传值及调用方法
    「Vue」vue生命周期
    「Vue」自定义指令
    「Vue」自定义按键修饰符
    「Vue」过滤器
    常用断点设置
    BUUCTF 不一样的flag writeup
    好久没有写东西,最近在看逆向相关的东西,做点记录
  • 原文地址:https://www.cnblogs.com/zhaozhipeng/p/6836830.html
Copyright © 2011-2022 走看看