资讯专栏INFORMATION COLUMN

[面试专题]JS事件模型

lindroid / 673人阅读

摘要:在这个事件发生期间,调用可阻止滚动当手指从屏幕上移开时触发。关于此事件的确切触发事件,文档中没有明确说明。特定于事件目标的对象的数组。

JS事件模型
事件模型以及周边

事件捕获

事件冒泡

事件触发

移动端事件模拟

事件委托

事件流 事件捕获(event capturing)&事件冒泡(event bubbling)

给inner,out均绑定点击事件.点击inner,如果out先执行,inner后执行.则是事件捕获.若inner先执行.out后执行则是事件冒泡.(这两种模型来自于早期浏览器之争)

W3C模型

先事件捕获,到达目标后再进行冒泡

示例演示
out.addEventListener("click", (e) => {
   console.log("out clicked! ")
}, true)
inner.addEventListener("click", (e) => {
    console.log("inner clicked! ")
}, false)
document.addEventListener("click", (e) => {
    console.log("document clicked! ")
}, true)
点击inner后,执行顺序:document clicked => out clicked => inner clicked
out.addEventListener("click", (e) => {
   console.log("out clicked! ")
}, true)
inner.addEventListener("click", (e) => {
    console.log("inner clicked! ")
}, false)
document.addEventListener("click", (e) => {
    console.log("document clicked! ")
}, false)
点击inner后,执行顺序: out clicked => inner clicked => document clicked
事件模型 1.DOM0级事件(默认发生在冒泡阶段.只能绑定一个事件) 事件绑定
 ele.onclick = function (){
     //
 }
事件解除绑定
ele.onclick = null;
2.DOM2级事件(默认发生在冒泡阶段,由第三个参数决定,可绑定多个事件) 事件绑定
ele.addEventListener(eventType, handler, useCapture)//eventType不带on,如click
//IE下用attachEvent
ele.attachEvent(eventType, handler);
事件解除绑定
ele.removeEventListener(eventType, handler, useCapture)
//IE下使用detachEvent
ele.detachEvent(eventType, handler);
事件对象 DOM事件模型中的事件对象常用属性:

type用于获取事件类型

target获取事件目标

stopPropagation()阻止事件冒泡

preventDefault()阻止事件默认行为

IE事件模型中的事件对象常用属性:

srcElement获取事件目标

cancelBubble阻止事件冒泡

returnValue阻止事件默认行为

兼容处理
var eventUtil = {
    addEvent: function(ele, event, func, bool) {
        bool = bool || false;
        if (ele.addEventListener) {
            ele.addEventListener(event, func, bool)
        } else {
            ele.attachEvent("on" + event, func, bool);
        }
    },
    removeEvent: function(ele, event, func, bool) {
        bool = bool || false;
        if (ele.removeEventListener) {
            ele.removeEventListener(event, func, bool);
        } else {
            ele.detachEvent("on" + event, func, bool);
        }
    },
    getEvent: function(event) {
        return event || window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault:function (event) {
         if (event.preventDefault) {
            event.preventDefault();
         }else {
             event.returnValue = false;//IE
         }
    },
    stopPropagation:function  (event) {
         if (event.stopPropagation) {
            event.stopPropagation();
         } else {
             event.cancelBubble = true;//IE
         }
    }
};
移动端事件 Touch事件

touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间,调用preventDefault()可阻止滚动

touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件,文档中没有明确说明。
以上事件的event对象上面都存在如下属性:
touches:表示当前跟踪的触摸操作的Touch对象的数组。
targetTouches:特定于事件目标的Touch对象的数组。
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含下列属性:
identifier:表示触摸的唯一ID。

clientX:触摸目标在视口中的X坐标。
clientY:触摸目标在视口中的Y坐标。
pageX:触摸目标在页面中的x坐标。
pageY:触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。
screenY:触摸目标在屏幕中的y坐标。
target:触摸的DOM节点坐标

触发过程
touchstart =>touchmove =>touchend =>click(延迟300~200ms)

Tap事件封装原理:利用touchstart =>touchmove =>touchen模拟click

HTMLElement.prototype.tap = function (handler,interval) {
     that = this
     this.isMove = false,
     this.startTime = 0,
     this.addEventListener("touchstart",function(e){
            startTime = Date.now();
        }),
     this.addEventListener("touchmove",function(e){
            isMove = true;
        }),
     this.addEventListener("touchend",function(e){
            if(!this.isMove && (Date.now()-startTime) < interval){
                handler();
            }
            this.isMove = false;
            this.startTime = 0;
        })
};
事件委托

把本应绑定在自身的事件绑定到其他元素上来触发即事件委托

//HTML
  • a
  • b
//JS var oUl = document.getElementById("ul"); oUl.onmouseover = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if((/li/i).test(target.nodeName)){ target.style.background = "red"; } } oUl.onmouseout = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if((/li/i).test(target.nodeName)){ target.style.background = ""; } } //JS

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82112.html

相关文章

  • [面试专题]一线互联网大厂面试总结

    摘要:道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的,使用自主研发的渲染引擎,和都使用网络用来 道阻且长啊TAT(前端面试总结) 前端 面试 笔试 面试 腾讯一面 1.浏览器工作原理 浏览器的主要组件包括: 用户界面- 包括地址栏、后退/前...

    lemanli 评论0 收藏0
  • [面试专题]一线互联网大厂面试总结

    摘要:道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的,使用自主研发的渲染引擎,和都使用网络用来 道阻且长啊TAT(前端面试总结) 前端 面试 笔试 面试 腾讯一面 1.浏览器工作原理 浏览器的主要组件包括: 用户界面- 包括地址栏、后退/前...

    xfee 评论0 收藏0
  • [面试专题]一线互联网大厂面试总结

    摘要:道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的,使用自主研发的渲染引擎,和都使用网络用来 道阻且长啊TAT(前端面试总结) 前端 面试 笔试 面试 腾讯一面 1.浏览器工作原理 浏览器的主要组件包括: 用户界面- 包括地址栏、后退/前...

    littleGrow 评论0 收藏0
  • [面试专题]一线互联网大厂面试总结

    摘要:道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的,使用自主研发的渲染引擎,和都使用网络用来 道阻且长啊TAT(前端面试总结) 前端 面试 笔试 面试 腾讯一面 1.浏览器工作原理 浏览器的主要组件包括: 用户界面- 包括地址栏、后退/前...

    leap_frog 评论0 收藏0
  • [面试专题]JS异步原理(事件,队列)

    摘要:全部代码是一个先执行一个执行过程中遇到等异步操作则创建一个遇到等创建一个这两个分别被挂起执行栈为空时开始处理完成后处理直到该全部执行完然后继续主线程调用栈注每一次事件循环,只处理一个。 JS异步原理(事件,队列) 调用栈 JS执行时会形成调用栈,调用一个函数时,返回地址、参数、本地变量都会被推入栈中,如果当前正在运行的函数中调用另外一个函数,则该函数相关内容也会被推入栈顶.该函数执...

    LeoHsiun 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<