我是靠谱客的博主 纯真衬衫,这篇文章主要介绍头条面试题-创建一个Event类,并创建on、off、trigger、once方法,现在分享给大家,希望可以做个参考。

一、创建一个Event.js

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!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: 0; left: 0; 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>

 

转载于:https://www.cnblogs.com/hyshi/p/10918500.html

最后

以上就是纯真衬衫最近收集整理的关于头条面试题-创建一个Event类,并创建on、off、trigger、once方法的全部内容,更多相关头条面试题-创建一个Event类内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(68)

评论列表共有 0 条评论

立即
投稿
返回
顶部