vue 的 emit 和mixins 两个特性是这篇文章的基础,当然抛开vue 也可以直接使用全局调用实现,所以这块不做讨论
先看效果,合并一个mixin 然后就可以处理事件监听了
step 1、编写一个简单mixin 实现事件接收调度处理管理功能
export default {
created() {
//定义一个自定义事件 toLowerCase 是为了躲避vue的坑
this.$on("NotifyChildComReSize".toLowerCase(), this.EVENT_RESIZE_HANDLE);
},
data() {
return {
events: new Map(),//这里监听自定义事件和回调函数
EVENT_RESIZE: "EVENT_RESIZE"//事件监听名称 类似 CLICK
}
},
methods: {
//这是一个 resize 事件的调度处理函数
EVENT_RESIZE_HANDLE(size) {
//获取已经注册的监听事件
let resizeFunS = this.events.get(this.EVENT_RESIZE);
if (Array.isArray(resizeFunS)) {
resizeFunS.forEach(func => {
func.call(this, size);//直接回调 并把 通过自定义事件得到的size 回传给回调函数
})
}
},
//添加一个事件监听
addEvent(eventName, func) {
let targetEventFunS = this.events.get(eventName);
targetEventFunS = targetEventFunS ||[];
targetEventFunS.push( func);
this.events.set(eventName,targetEventFunS);
},
//注销事件所有监听
offEvent(eventName) {
this.events.set(eventName, []);
}
}, destroyed() {
//销毁一个自定义事件
this.$off("NotifyChildComReSize".toLowerCase(), this.EVENT_RESIZE_HANDLE);
}
}
step 2、原始事件触发,可以在任意一级父组件里通过 自己实现动态计算监听组件的大小变化,这块是功能驱动的基础,此处只是抛砖引玉,当然你可以把他设计为一个怪兽被秒掉的通知,也可以设计成你每100万个用户注册成功的通知,实现逻辑由您定
listenComResize() {
let intervalTime = 1000;//检测和通知时间间隔,为了避免resize过程中的连续变化导致连续调用
this.clientHeight = this.$el.parentNode.clientHeight;
this.scrollHeight = this.$el.parentNode.scrollHeight;
this.refreshSetInterval = setInterval(() => {
this.clientHeight = this.$el.parentNode.clientHeight;
this.scrollHeight = this.$el.parentNode.scrollHeight;
let clientHeight = this.$el.parentNode.clientHeight;
let clientWidth = this.$el.parentNode.clientWidth;
let curTime = new Date().getTime();
//判断 【(curTime - this.refreshTime) > intervalTime】这句是为了避免通知太过频繁
if (this.lastHeight != 0 && this.lastWidth != 0 && (clientHeight != this.lastHeight || clientWidth != this.lastWidth) && (curTime - this.refreshTime) > intervalTime) {
this.lastHeight = clientHeight;
this.lastWidth = clientWidth;
this.refreshTime = curTime;
//这块####很~!!重要!!!!@@ ->>>通知到>>>>>>>Mixin
this.$emit("NotifyChildComReSize".toLowerCase())
} else if (clientHeight != this.lastHeight || clientWidth != this.lastWidth) {
this.lastHeight = clientHeight;
this.lastWidth = clientWidth;
}
this.clientHeight = Math.floor(this.clientHeight - 1);
}, intervalTime);
this.clientHeight = Math.floor(this.clientHeight - 1);
}
},
step 3:注册事件 ,并处理监听
export default {
mixins:[comEvent],//合并mixin 得到事件监听处理的通知
mounted(){
this.addEvent(this.EVENT_RESIZE,this.resizeCall);//注册一个resize事件
},
methods:{
resizeCall(size){
console.log(size);//输出获得的值
},
offResizeCall(){
this.offEvent(this.EVENT_RESIZE,this.resizeCall);//注销resize事件
}
}
}
我们都知道addEventListener() 的参数约定是:useCapture是可选参数,默认值为false,目前DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了。passive就是告诉浏览器我可不可以用stopPropagation...
在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。
具有层级关系的结构中,使用了pointer-events:none 属性将会使当前元素中的事件不会被捕获,从而实现了点穿的效果。而当代码示例中假如top元素具有子元素且显示指定pointer-events属性不为none的时候,top元素注册的事件将会被捕获/冒泡触发
事件对象 event,JavaScript 将事件event作为参数传递,IE中把 event 事件对象作为全局对象 window 的一个属性,获取鼠标在网页中的坐标 = 鼠标在视窗中的坐标 + 浏览器滚动条坐标
何为默认事件?比如 a 会跳转页面,submit 会提交表单等。普通js方法:e.preventDefault()函数。Vue.js方法: .prevent 是vue 的内置修饰符,调用了 event.preventDefault()阻止默认事件
js keyup、keypress和keydown事件都是有关于键盘的事件,当一个按键被pressed 或released在每一个现代浏览器中,都可能有三种客户端事件。
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O的模型,使其轻量又高效。比如,文件操作中的fs事件流,网络编程所用到的tcp,http模块等,当你回想自己写的程序后,会发现很多操作都基于事件驱动,Events类。
在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错;当然还有使用纯JS实现的小代码段。我这里整理了纯CSS实现方式,给需要的人和给自己做个笔记:实现原理利用CSS伪类:target
我做的是一个table的编辑功能,当移入某行的时候展示编辑状态,在移出某行的时候显示的是原始状态,此时遇到一种情况,就是.当mousenter事件触发之后,由于鼠标移动得太快,同一个tr上绑定的mouseleave事件压根儿就没有执行。
js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!