头条面试题-创建一个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 ) ...
随机推荐
- laravle 事务
DB::beginTransaction(); try{ $name = 'abc'; $result1 = Test::create(['name'=>$name]); ...
- KiCad EDA 5.1.3 正式发布了
KiCad EDA 是一款用于印刷电路板设计的开源自由软件,最初由法国人 Jean-Pierre Charras 于 1992 年推出1,现由 KiCad 开发团队维护. KiCad 目前支持英语.法 ...
- python 使用异常代替返回状态码
- lavarel box 地址
https://atlas.hashicorp.com/laravel/boxes/homestead download URL https://atlas.hashicorp.com/laravel ...
- iOS开发 分享到QQ空间提示"分享失败 应用不存在"
本人遇到该问题的原因是配置SDK初始化时的APPID错误,可以参考下shareSDK的集成文档中的一段话: 可选:支持QQ所需的相关配置及代码 登录QQ互联(http://connect.qq.com ...
- 1月北上广P2P平台之最 平台数成交量现双降
1月北上广P2P平台之最 平台数成交量现双降 今日(2月9日),网贷之家联合盈灿咨询发布了<北上广地区P2P网贷行业2017年1月月报>.月报数据显示,截至2017年1月底,北京.上海 ...
- tensorflow 卷积层
TensorFlow 卷积层 让我们看下如何在 TensorFlow 里面实现 CNN. TensorFlow 提供了 tf.nn.conv2d() 和 tf.nn.bias_add() 函数来创 ...
- @codeforces - 1205B@ Shortest Cycle
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个长度为 n 的正整数序列 a1, a2, ..., an ...
- [***]HZOJ 奇袭
C. 奇袭 题目描述 由于各种原因,桐人现在被困在Under World(以下简称UW)中,而UW马上 要迎来最终的压力测试——魔界入侵. 唯一一个神一般存在的Administrator被消灭了,靠原 ...
- P2993 [FJOI2014]最短路径树问题 点分治+最短路
这道题还是非常简单的,由于我们要保证最小字典序,因此我们需要把边进行排序,然后从大到小插入,因为链式前向星是倒着存的.我们只需要先跑一个最短路,然后查询边是不是在最短路上,这个可以通过枚举边并用 di ...