Event自定义事件

//index.html文件<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>#box{width: 100px;height: 100px;background-color: red;position: absolute;top: 0;left: 0;} </style>
</head>
<body><div id="box"></div>
</body>
</html>
<script src="./event.js"></script>
<script>class Drag extends Event{constructor(el){super();this.el = el;  //元素this.startPoint = {}; //起始鼠标位置this.startEl = {}; //起始元素位置let move = e => {this.move(e);}let end = (e) => {document.removeEventListener('mousemove',move);document.removeEventListener('mouseup',end);this.end(e); //触发事件
            }document.addEventListener('mousedown',e => {this.start(e);this.startPoint = {x : e.clientX,y : e.clientY}this.startEl = {x : this.el.offsetLeft,y : this.el.offsetTop}document.addEventListener('mousemove',move);document.addEventListener('mouseup',end)})}move(e){let nowPoint = {x : e.clientX,y : e.clientY}let dix = {x : nowPoint.x - this.startPoint.x,y : nowPoint.y - this.startPoint.y} this.el.style.left = this.startEl.x + dix.x + 'px';this.el.style.top = this.startEl.y + dix.y + 'px';}start(e){this.trigger('dragStart',e,this.el)}end(e){this.trigger('dragEnd',e,this.el)}}var box = document.getElementById('box');var drag = new Drag(box);drag.on('dragStart',function(e){this.style.background = 'yellow';})drag.on('dragEnd',function(e){this.style.background = 'red';})</script>//event.js文件

class Event{constructor(){this.handlers = {}//记录所有的事件和处理函数
    }/*** 添加事件监听*@param type : 事件类型@param hander : 处理函数*/on(type,hander,once = false){if(!this.handlers[type]){ //判断是否添加了事件函数this.handlers[type] = []}if(!this.handlers[type].includes(hander)){ //查看是否重复添加事件函数this.handlers[type].push(hander);hander.once = once; //给事件函数添加一个once属性
        }}/*** 取消事件监听* @param {*} type * @param {*} hander */off(type,hander){if(this.handlers[type]){if(hander === undefined){this.handlers[type] = [];}else{this.handlers[type] = this.handlers[type].filter(item => {return item != hander})}}}/*** 触发事件监听* @param {*} type * @param {*} e * @param {*} that */trigger(type,e,that){if(this.handlers[type]){this.handlers[type].forEach(f => {f.call(that,e);if(f.once){this.off(type,f); //根据once属性取消事件
                }})} }/*** 执行一次* @param {*} type * @param {*} hander */once(type,hander){this.on(type,hander,true); //true控制执行一次
    }
}

转载于:https://www.cnblogs.com/ninefrom/p/10875860.html

Event自定义事件相关推荐

Event事件-6:new Event自定义事件 / addEvent绑定自定义 / trigger触发自定义 / removeEvent移除自定义
new Event 自定义事件 new Event(typeArg, eventInit) typeArg 事件名称 eventInit "bubbles",可选,Boolean类 ...
UE4 虚幻引擎，蓝图Custom Event自定义事件，Call In Editor 在编辑器中调用
1.在Blueprint蓝图中,Custom Event自定义事件的Details细节面板中,打开Call In Editor编辑器中调用. 2.在Map关卡中的的Details细节面板,就可以直接点 ...
Qt 自定义事件的实现
初学Qt,用了Qt自带的事件,然后想怎么才能定义自己的事件呢?又如何使用自定义事件呢?看了篇文章,说先要子类化QEvent,然后定义自己的QEvent::Type,然后重写QWidget::event ...
自定义事件详解以及实现有趣B站直播间弹幕轰炸功能
案例:B站直播间弹幕轰炸跳过按键监听办法: var event = document.createEvent('Event'); event.initEvent('input', true, true ...
初始化触发点击事件_【Vue原理】Event - 源码版之自定义事件
专注 Vue 源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于 Vue版本[2.5.17] Vue 的自定义事件很简单,就是使用观察者模 ...
python自定义事件event的含义_事件Event详解
简介事件模型很多编程语言中都有广泛的应用,在饥荒中也一样.许多component在执行一些核心函数时都会顺带触发事件,比如combat在攻击到目标是就会触发onhitother事件.这时候如果监听该 ...
js事件Event对象(自定义事件对象 CustomEvent)
文章目录一.参考二.Event 接口介绍 2.1 事件分类三. 创建过时Event不推荐 3.1 document.createEvent 3.1.1 语法`var event = docume ...
cocos2d-js 自定义事件监听派发
熟悉js的dom事件或者flash事件的,基本都能立马明白cc.eventManager的用法. cc.eventManager有两种注册监听器的方式,一种是原生事件,例如 cc.eventManag ...
Javascript框架的自定义事件(转)
很多 javascript 框架都提供了自定义事件(custom events),例如 jquery.yui 以及 dojo 都支持"document ready"事件.而部分自定 ...

Event自定义事件

Event自定义事件相关推荐

最新文章

热门文章