美文网首页
自定义事件

自定义事件

作者: 小漠穷秋 | 来源:发表于2018-04-27 20:12 被阅读0次

看高程的时候,里面提到自定义事件。其实核心思想都是观察者模式。
当我们addEventListener的时候,dom元素就是主体,回调函数就是观察者。
当我们自定义js事件的时候,event就是主体,回调函数就是观察者。

自定义事件分为两种:
一种是模拟操作的DOM相关事件
一种是用js对象模拟的自定义事件。

模拟dom的事件,一般通过createEvent来构造。
var evt = createEvent('CustomEvent'||'MouseEvent'||'MouseEvent');
evt.initEvent();
evt.dispatchEvent();

可以自定义双击 三击事件。比如
<div id="d1">有本事点我三次</div>
<script type="text/javascript">
var d1 = document.getElementById('d1');
d1.addEventListener('tripleclick',function(event){
alert('我被三击了~');
},false);
var e = new CustomEvent('tripleclick',{'detail':'somemsg'});
var counter = 0;
d1.onclick = function(){
setTimeout(function(){counter=0;},500);
if(++counter==3){
d1.dispatchEvent(e);
}
}
</script>

js的自定义事件,主要用于解耦。也就是我们可以通过继承的方式,将事件对象全部继承过来,在新对象调用自己的某个方法的时候,可以直接fire自定义事件。把事件给抽象出来。

案例可以参考高程提出的。
function EventTarget(){
this.handlers = {};
}
EventTarget.prototype = {
constructor: EventTarget,
addHandler: function(type,handler) {
if(typeof this.handlers[type] == undefined) {
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire: function(event){
if (!event.target) {
event.target = this;
}
if(this.handlers[event.type] instanceof Array) {
let handlers = this.handlers[event.type];
for(let i = 0 , length = handlers.length; i < length; i++) {
handlersi;
}
}
},
removeHandler: function(type,handler) {
if(this.handlers[type] instanceof Array) {
var handlers = this.handlers[type];
for(let i = 0, len = handlers.length; i < len; i++) {
if(handlers[i] == handler) {
break;
}
}
this.handlers.splice(i,1);
}
}
}

function gotest(event) {
console.log('this is'+ event.message + 'test');
}
var target = new EventTarget();
target.addHandler('message',gotest);
target.fire({type:'message',message:'hello world'});
target.removeHandler('message',gotest);

后续直接进行继承就可以使用

function person() {
EventTarget.call(this);
}
person.prototype.say = function(){
this.fire({type;'message',message:'hello world'})
}

相关文章

  • 自定义事件js

    title: 自定义事件date: 2017-06-06 15:36:04tags: 自定义事件 js的自定义事件...

  • jQuery例子记录(持续更新)

    目录: 1.自定义事件2.操作DOM(与JS原生对比) 1.自定义事件 绑定自定义事件: 事件名称refresh....

  • JavaScript之事件完整篇

    目录html原生事件自定义事件node中的自定义事件前端框架的自定义事件 一、html原生事件 1. 概念 观察者...

  • springboot之事件监听

    springboot事件监听 自定义事件 自定义事件继承至ApplicationEvent,事件类不能注册为spr...

  • this.$emit()

    this.$emit("自定义事件") 通过触发自定义事件,来给触发监听事件

  • JS中的事件

    JS中的事件 一:自定义事件 1.使用Event自定义事件 使用Event接口,可以自定义事件。但是该接口无法在事...

  • vs2017开发ActiveX(主讲OCX)(六)、添加自定义事

    添加自定义事件 前言 自定义事件与常用事件的不同之处在于它们不会被类COleControl自动触发。 自定义事件将...

  • jquery怎样绑定事件及事件函数

    绑定事件方式: 取消绑定事件方式: 事件函数列表: 自定义事件:除了系统事件外,可以通过bind方法自定义事件,然...

  • jquery事件

    jQuery其他事件 绑定事件 自定义事件

  • jquery事件

    自定义事件 除了系统事件外,可以通过bind方法自定义事件,然后用tiggle方法触发这些事件。 什么是事件冒泡 ...

网友评论

      本文标题:自定义事件

      本文链接:https://www.haomeiwen.com/subject/gxwhvxtx.html