资讯专栏INFORMATION COLUMN

前端事件绑定知识点(面试常考)

wizChen / 2738人阅读

摘要:事件通常与函数配合使用,当事件发生时函数才会执行。的事件流是事件捕获流,事件由根元素获取并沿树向下分发。通过添加事件,只能用删除此事件。这主要得益于浏览器的事件冒泡机制。

简介

事件是可以被 JavaScript 侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

事件通常与函数配合使用,当事件发生时函数才会执行。

执行JS 事件的方式:

HTML 事件属性可以直接执行 JavaScript 代码

HTML 事件属性可以调用 JavaScript 函数

你可以为 HTML 元素指定自己的事件处理程序

你可以阻止事件的发生。

等等 ...

常用的JS事件 type
鼠标单击事件 onclick
鼠标经过事件 onmouseover
鼠标移开事件 onmouseout
聚焦事件 onfocus
失焦事件 onblur
加载事件 onload
刷新页面 onunload(貌似只对IE有效)
关闭页面 onbeforeunload(貌似只对IE有效)

事件流

事件流描述的是从页面中接受事件的顺序。

IE 的事件流是事件冒泡流,事件由子元素获取并沿DOM树向上传播。即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(document),用 stopPropagation() 方法终止冒泡。

Netscape 的事件流是事件捕获流,事件由根元素获取并沿DOM树向下分发。与事件冒泡流相反,事件捕获的思想是不太具体的节点(document)应该更早接收到事件,而最具体的节点最后接收到事件。已经不适用了

Event 对象

HTML DOM Event 对象

header 1 header 2
事件 event
事件目标 event.target
添加事件 element.addEventListener(type, listener, false)
移除事件 element.removeEventListener(type, listener, false)
阻止事件冒泡 event.stopPropagation()
取消默认行为 event.preventDefault()

IE 中的 Event 对象

header 1 header 2
事件 window.event
事件目标 event.srcElement
添加事件 element.attachEvent("on" + type, listener)
移除事件 element.detachEvent("on" + type, listener)
阻止事件冒泡 event.cancelBubble = true
取消默认行为 event.returnValue = false
事件处理程序

HTML 事件处理程序

事件直接写在html的元素里面,缺点:html和js代码紧密的耦合在一起。

测试

0级 DOM事件处理程序

把一个函数赋值给一个事件的处理程序属性,优点:比较简单,跨浏览器支持。缺点:不能添加多个事件处理程序,最后一个事件会覆盖前面的事件

document.getElementById("id").onclick = function () {
    alert(1);
}

2级 DOM事件处理程序

通过 addeventlistener() 添加事件,只能用 removeEventlistener() 删除此事件。它们都接收三个参数:要处理的事件名event(不加"on")、作为事件处理程序的函数function(优点:可以添加多个事件处理程序,)和一个布尔值useCapture。布尔参数仅仅在现代浏览器最近的几个版本中是可加可不加的,并且true代表该事件在捕获阶段执行,false代表在冒泡阶段执行,建议写false,因为有些浏览器只有冒泡阶段。

target.addEventListener(type, listener[, useCapture]);
target.removeEventListener(type, listener[, useCapture]);

IE 事件处理程序

IE8 及更早IE版本不支持 addEventListener() 方法,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件句柄。通过 attachEvent() 添加事件,只能用 detachEvent() 删除此事件。这两个方法接收相同的两个参数:事件处理程序名称 type 与事件处理函数 function,不支持第三个参数的原因:IE8--只支持冒泡冒泡流。

element.attachEvent(type, function)
element.detachEvent(type, function)
事件代理和委托

当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

跨浏览器兼容的事件处理程序(能力检测)
/*
 * @Author: bxm09
 * @Date:   2017-03-24 15:51:37
 * @Last Modified by:   bxm09
 * @Last Modified time: 2017-07-24 13:16:04
 * @Desc 跨浏览器兼容的事件处理程序(能力检测)
 */

var eventshiv = {
    // event兼容
    getEvent: function(event) {
        return event ? event : window.event;
    },

    // type兼容
    getType: function(event) {
        return event.type;
    },

    // target兼容
    getTarget: function(event) {
        return event.target ? event.target : event.srcelem;
    },

    /**
     * 添加事件句柄
     * 2级 DOM -> IE -> 0级 DOM
     */
    addHandler: function(elem, type, listener) {
        if (elem.addEventListener) {
            elem.addEventListener(type, listener, false);
        } else if (elem.attachEvent) {
            elem.attachEvent("on" + type, listener);
        } else {
            // 在这里由于.与"on"字符串不能链接,只能用 []
            elem["on" + type] = listener;
        }
    },

    // 移除事件句柄
    removeHandler: function(elem, type, listener) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, listener, false);
        } else if (elem.detachEvent) {
            elem.detachEvent("on" + type, listener);
        } else {
            elem["on" + type] = null;
        }
    },

    /**
     * 添加事件代理
     */
    addAgent: function (elem, type, agent, listener) {
        elem.addEventListener(type, function (e) {
            if (e.target.matches(agent)) {
                listener.call(e.target, e); // this 指向 e.target
            }
        });
    },

    /**
     * 取消默认行为
     * 非IE -> IE
     */
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    /**
     * 阻止事件冒泡
     * 非IE -> IE
     */
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

console.log("eventshiv.js 文件加载成功!");

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

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

相关文章

  • 前端事件绑定识点面试常考

    摘要:事件通常与函数配合使用,当事件发生时函数才会执行。的事件流是事件捕获流,事件由根元素获取并沿树向下分发。通过添加事件,只能用删除此事件。这主要得益于浏览器的事件冒泡机制。 简介 事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 事件通常与函数配合使用,当事件发生时函数才会执行。 执行JS 事件的方式: ...

    liujs 评论0 收藏0
  • 前端面试常考识点---js

    摘要:上面实现了递归调用,这样做的好处是在前一个定时器代码执行完成之前,不会向队列插入新的定时代码,确保不会有任何的缺失间隔。而且,它保证在下一次定时器代码执行之前,至少要等待指定的时间间隔。 1.同步和异步 详细~文章总结: setTimeout(fn,ms)这个函数,是经过指定时间后,把要执行的任务加入到Event Queue中,又因为是单线程任务要一个一个执行,如果前面的任务需要的时间...

    BingqiChen 评论0 收藏0
  • 前端面试常考识点---CSS

    摘要:在布局规则中提到计算的高度时,浮动元素也参与计算。因此,父元素在计算其高度时,加入了浮动元素的高度,顺便达成了清除浮动的目标,所以父元素就包裹住了子元素。 前端面试常考知识点---js 1.CSS3的新特性有哪些 点我查看 CSS3选择器 . CSS3边框与圆角 CSS3圆角border-radius:属性值由两个参数值构成: value1 / value2,值之间用/分隔,v...

    骞讳护 评论0 收藏0
  • PHP面试常考内容之Memcache和Redis(1)

    摘要:以下正文的部分内容来自程序员面试笔试宝典书籍,如果转载请保留出处一什么是是一个开源免费高性能的分布式对象缓存系统,它基于一个存储键值对的来存储数据到内存中。预告面试常考内容之和将于本周三更新。 你好,是我琉忆。继上周(2019.2-11至2-15)发布的PHP面试常考内容之面向对象专题后,发布的第二个专题,感谢你的阅读。本周(2019.2-18至2-22)的文章内容点为以下几点,更新时...

    wenyiweb 评论0 收藏0

发表评论

0条评论

wizChen

|高级讲师

TA的文章

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