Comments (3)
`export const myEvent = {
// 页面加载完成后
readEvent: function(fn: any){
if(fn === null || fn === undefined){
fn = document
}
let oldOnload: any = window.onload;
if(typeof window.onload !== "function"){
window.onload = fn
} else {
window.onload = function(){
oldOnload()
fn()
}
}
},
// 页面元素事件绑定
addEvent: function(element:any,type:any,handle:Function){
if(element.addEventListener){ // w3c
// 参数分别表示事件类型、需要执行的函数、是否捕捉
element.addEventListener(type,handle,false)
} else if(element.attachEvent){
element.attachEvent("on"+type,function(){
handle.call(element)
})
} else {
element["on"+type] = handle
}
},
removeEvent: function(element:any,type:any,handle:Function){
if(element.removeEventListener){
element.removeEventListener(type,handle,false)
} else if (element.detachEvent){
element.detachEvent("on"+type,handle)
} else {
element["on"+type] = null
}
},
stopPropagation: function(ev:any){
if(ev.stopPropagation){
ev.stopPropagation()
} else {
ev.cancelBubble = true
}
},
preventDefault: function(ev:any){
if(ev.preventDefault){
ev.preventDefault()
} else {
ev.returnValue = false
}
},
// 获取事件目标
getTarget: function(event:any){
return event.target || event.srcElement;
},
// 获取event对象的引用,取到事件的所有信息
getEvent: function(e:any){
let ev = e || window.event;
if(!ev){
let c = this.getEvent.caller
while(c){
ev = c.arguments[0]
if(ev && Event === ev.constructor){
break;
}
c = c.caller
}
}
return ev
}
}`
from fe-interview.
let eventUtils = {
addEventListener:(ele,type,handler)=>{
if(ele.addEventListener){
ele.addEventListener(type,handler)
} else if(ele.attachEvent){
ele.attachEvent("on"+type,handler)
} else {
ele['on'+type] = handler
}
},
removeEventListener:(ele,type,handler)=>{
if(ele.addEventListener){
ele.removeEventListener(type,handler)
} else if(ele.attachEvent){
ele.detachEvent("on"+type,handler)
} else {
ele['on'+type] = null
}
}
}
from fe-interview.
`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;
}
}
};`
from fe-interview.
Related Issues (20)
- Day378:说一下什么是 Http 协议无状态?怎么解决 Http 协议无状态?
- Day379:如果让你来实现一个前端监控系统,应该考虑什么?如何去实现?
- Day380:实现一个系统,统计前端页面性能、页面 JS 报错、用户操作行为、PV/UV、用户设备等消息,并进行必要的监控报警。方案如何设计,用什么技术点,什么样的系统架构,难点会在哪里? HOT 3
- Day381:说一下 JavaScript 严格模式下有哪些不同?
- Day382:说一下 setTimeout 和 setInterval 的区别,包含内存方面的分析?
- Day383:说下 React 的 useEffect、useCallback、useMemo HOT 2
- Day384:JavaScript 中如何实现一个类?怎么实例化这个类? HOT 2
- Day385:在一个 DOM 上同时绑定两个点击事件:一个用捕获,一个用冒泡。事件会执行几次?先执行冒泡还是捕获? HOT 9
- 定时函数 HOT 1
- 小程序不维护了吗? HOT 10
- --
- 小程序里面的内容还有其他地方能学习吗
- 求小程序哇!!不然学习效率太低了 HOT 1
- 现在还能在哪里看题目答案吗?小程序关闭了😭😭 HOT 1
- #### 1)为什么会有Event Loop
- > > > @Genzhen 请教一下大佬,如果在render里面结构赋值也会影响性能吗?比如 const { page, size } = this.state这种的? HOT 1
- 考察原型链
- issue路径错误,提不了pr,可见下图
- vue中&nextTick的原理
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe-interview.