头条面试题-创建一个Event类，并创建on、off、trigger、once方法
一、创建一个Event.js
class Event {
constructor() {
this.handlers = { // 记录所有的事件和处理函数
}
}
/* *
* on 添加事件监听
* @param type 事件类型
* @param handler 事件回调
* on('click', ()=>{})
* */
on(type, handler, once=false) {
if (!this.handlers[type]) {
this.handlers[type] = [];
}
if (!this.handlers[type].includes(handler)) {
this.handlers[type].push(handler);
handler.once = once;
}
}
/* *
* off 取消事件监听
*
* */
off(type, handler) {
if (this.handlers[type]) {
if (handler === undefined) {
this.handlers[type] = []
} else {
this.handlers[type] = this.handlers[type].filter((f)=>{
return f!=handler
})
}
}
}
/* *
* @param type 要执行哪个类型的函数
* @param eventData事件对象
* @param point this指向
*
* */
trigger(type, eventData = {}, point=this) {
if (this.handlers[type]) {
this.handlers[type].forEach(f => {
f.call(point, eventData);
if (f.once) {
this.off(type, f)
}
});
}
}
/* *
* once 函数执行一次
* @param type 事件处理
* @param handle 事件处理函数
* */
once(type, handler) {
this.on(type, handler, true);
}
}
二、使用Event.js
<!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 {
position: absolute;
top: ;
left: ;
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="./event.js"></script>
</head>
<body>
<div id="box"></div> <script>
/*
* 1.记录摁下时鼠标的位置和元素位置
* 鼠标位置-摁下时的鼠标位置 = 鼠标移动的位置
* 元素位置=鼠标移动距离+摁下时元素位置
**/
class Drag extends Event{
// 构造函数
constructor(el) {
super(); // 继承
this.el = el;
this.startOffset = null; // 鼠标摁下时元素的位置
this.startPoint = null; // 鼠标的坐标
let move = (e)=>{
this.move(e)
}
let end = (e)=>{
document.removeEventListener('mousemove', move);
document.removeEventListener('mouseup', end);
this.end(e)
}
el.addEventListener('mousedown', (e)=> {
this.start(e); document.addEventListener('mousemove', move);
document.addEventListener('mouseup', end);
}) }
start(e) {
let {el} = this;
console.log(this)
console.log(el)
this.startOffset = {
x: el.offsetLeft,
y: el.offsetTop
}
this.startPoint = {
x: e.clientX,
y: e.clientY
}
this.trigger('dragstart', e, this.el)
}
end(e) {
this.trigger('dragend',e, this.el)
}
move(e) {
let {el, startOffset, startPoint} = this;
let nowPoint = {
x: e.clientX,
y: e.clientY
}
let dis = {
x: nowPoint.x - startPoint.x,
y: nowPoint.y - startPoint.y
}
el.style.left = dis.x + startOffset.x + 'px';
el.style.top = dis.y + startOffset.y + 'px';
this.trigger('dragmove', e, el)
}
} (function() {
let box = document.querySelector('#box');
let dragBox = new Drag(box); dragBox.on('dragstart', function(e) {
console.log(e);
console.log(this);
this.style.background = 'yellow';
})
dragBox.on('dragend', function(e) {
console.log('b')
this.style.background = 'blue';
})
dragBox.once('dragmove', function(e) {
console.log('c')
// this.style.background = 'blue';
})
console.log(dragBox)
})()
</script>
</body>
</html>
头条面试题-创建一个Event类，并创建on、off、trigger、once方法的更多相关文章
- 在存放源程序的文件夹中建立一个子文件夹 myPackage。例如，在“D:\java”文件夹之中创建一个与包同名的子文件夹 myPackage（D:\java\myPackage）。在 myPackage 包中创建一个YMD类，该类具有计算今年的年份、可以输出一个带有年月日的字符串的功能。设计程序SY31.java，给定某人姓名和出生日期，计算该人年龄，并输出该人姓名、年龄、出生日期。程序使用YM
题目补充: 在存放源程序的文件夹中建立一个子文件夹 myPackage.例如,在“D:\java”文件夹之中创建一个与包同名的子文件夹 myPackage(D:\java\myPackage).在 m ...
- 通过元类创建一个Python类
通过元类创建一个Python类 最开始学pytohn的时候我们这样定义类 class ClassName: pass 当熟悉了元类的概念之后我们还可以这样创建 ClassName = type(&qu ...
- 004_linux驱动之_class_create创建一个设备类
(一)解析:class_create函数和class_destroy函数 创建一个类 和 删除一个类. (二)class_create函数原型 struc ...
- 编写Java程序，创建一个 Person 类，该类中有一个类成员变量 country、一个实例变量 name 和另一个实例变量 age。
返回本章节 返回作业目录 需求说明: 创建一个 Person 类,该类中有一个类成员变量 country.一个实例变量 name 和另一个实例变量 age. country 表示地区,name 表示姓 ...
- 定义一个Rectangle类，该类提供getLength和getWidth方法。
import java.util.Comparator; /** * 定义一个Rectangle类,该类提供getLength和getWidth方法.利用图1-18中的findMax例程编写 * 一种 ...
- MySQL如何创建一个好索引？创建索引的5条建议【宇哥带你玩转MySQL 索引篇(三)】
MySQL如何创建一个好索引?创建索引的5条建议 过滤效率高的放前面 对于一个多列索引,它的存储顺序是先按第一列进行比较,然后是第二列,第三列...这样.查询时,如果第一列能够排除的越多,那么后面列需 ...
- 【Android Training UI】创建自定义Views(Lesson 1 - 创建一个View类)
发布在我的网站 http://kesenhoo.github.io/blog/2013/06/30/android-training-ui-creating-custom-views-lesson-1 ...
- mfc 创建一个C++ 类
类创建向导 添加一个C++类 #pragma once的作用 认识类视图 一.类创建向导 二.添加一个C++类 认识类创建向导: 创新一个处理文字信息的类CMessage CMessa ...
- 创建一个圆类Circle的对象，分别设置圆的半径计算并分别显示圆半径、圆面积、圆周长。
编写一个圆类Circle,该类拥有: ①一个成员变量 Radius(私有,浮点型): // 存放圆的半径: ②两个构造方法 Circle( ) // 将半径设为0 Circle(double r ) ...
随机推荐
- 将数组对象转换成DataSet
public static DataSet ObjectArrayToDataSet(object[] objArr) { if (objArr.Length == 0) return null; D ...
- ImmutableMap不可使用null的问题
示例 在项目中有发现类似下方的代码, Map tmpParams = ImmutableMap.of( "extraInfos", ext.get("extraInfos ...
- 如何mock https请求
最近在测试项目过程当中,遇到客户端mock https请求的场景,但是默认用charles抓取出来的https请求是乱码的,对于这类请求如何来mock,有以下2种方式: 1.这里有篇http://co ...
- Maven学习总结--maven入门(一)
一.Maven的基本概念 Maven(翻译为"专家","内行")是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理.
- Linux 下的python操作redis
python操作redis Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).se ...
- iOS7之后JavaScript与Objective-C之间的通信
http://www.cocoachina.com/ios/20150906/13320.html 最近公司用Ping++集成了第三方支付,并且微信端也集成了这个功能,而微信付款时需要调用原生的支付宝 ...
- 2019-6-23-WPF-获得当前输入法语言区域
title author date CreateTime categories WPF 获得当前输入法语言区域 lindexi 2019-06-23 11:51:21 +0800 2018-10-12 ...
- Javascript用正则表达式replace替换父串中所有符合条件的子串
这样用,只会替换匹配到的第一个子串 str = 'I hava a pen ,I hava an apple,apple pen, pen apple' str = str.replace('appl ...
- @codeforces - 414E@ Mashmokh's Designed Problem
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一棵 n 个点的树,每个点的儿子是有序的. 现给定 m 次操 ...
- 伪静态的实现方法：IIS环境下配置
URL 静态化可以提高搜索引擎抓取,开启本功能需要对 Web 服务器增加相应的 Rewrite 规则,且会轻微增加服务器负担.本教程讲解如何在 IIS 环境下配置各个产品的 Rewrite 规则. 下 ...