hgq's docs
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)

guoguoqiqi

漫不经心的向往
主页
ES6-阮一峰 (opens new window)
Vue文档 (opens new window)
Axios文档 (opens new window)
Vue Router (opens new window)
Vuex文档 (opens new window)
面试题-Vue (opens new window)
面试题-JS (opens new window)
  • call的实现
  • apply的实现
  • bind的实现
  • new的实现
  • instanceof的实现
  • Object create()的实现
  • Object assign()的实现
  • Promise的实现
  • 实现防抖函数(debounce)
  • 实现节流函数(throttle)
  • 深拷贝(deepclone)
  • 数组扁平化的实现(flat)
  • 函数柯里化
  • EventEmitter 实现
  • 数组的随机排序
  • 通用的事件侦听器函数
  • 实现一个JSONP
  • 数组的map方法
  • 数组的forEach方法
  • 数组的find方法
  • 数组的findIndex方法
  • 数组的some方法
  • 数组的filter方法
  • 数组的every方法
  • 数组的includes方法
  • 数组的fill方法
  • 数组的join方法
  • 数组的flat方法
  • 用setTimeout实现setInterval
  • 用setInterval实现setTimeout
  • 实现一个较完善的深拷贝
  • 代码手写
guoguoqiqi
2022-03-04

通用的事件侦听器函数

const EventUtils = {
  // 视能力分别使用dom0||dom2||IE方式 来绑定事件
  // 添加事件
  addEvent: function(element, type, handler) {
    if (element.addEventListener) {
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },
  // 移除事件
  removeEvent: function(element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },
 // 获取事件目标
  getTarget: function(event) {
    return event.target || event.srcElement;
  },
  // 获取 event 对象的引用,取到事件的所有信息,确保随时能使用 event
  getEvent: function(event) {
    return event || window.event;
  },
 // 阻止事件(主要是事件冒泡,因为 IE 不支持事件捕获)
  stopPropagation: function(event) {
    if (event.stopPropagation) {
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
  },
  // 取消事件的默认行为
  preventDefault: function(event) {
    if (event.preventDefault) {
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  }
};
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

← 数组的随机排序 实现一个JSONP→

最近更新
01
vuex数据持久化怎么做
05-22
02
vue的动态路由怎么配置使用
05-22
03
vue权限控制一般怎么做
05-22
更多文章>
Theme by Vdoing | Copyright © 2022-2022 Guoquoqiqi | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式