前台常见面试题(十一)@郝晨光

作者 : 开心源码 本文共3086个字,预计阅读时间需要8分钟 发布时间: 2022-05-13 共160人阅读

什么是事件委托?为什么要用事件委托?

什么是事件委托?

事件委托,又称事件代理商,就是将元素的事件解决交由父元素或者者祖先元从来代为执行;
事件委托利用了事件冒泡,只指定一个事件解决程序(函数),即可以管理某一类型的所有事件。
例如:我们只要要在document上绑定一个onclick事件,即可以通过事件冒泡的特性来解决一整个页面上所有的onclick事件,而不必给每一个元素去绑定onclick事件;当然这只是举个栗子,我们正常情况下绝对不会这么去做的。

为什么要用事件委托?

在javascript进行事件解决的时候,每个增加到页面上的事件函数都将直接影响页面的整体性能,每一个函数都是一个对象,都会占用内存,而内存中的对象越多,性能就越差。而为理解决这种问题,我们就需要使用事件委托。

事件委托的优点

  1. 只在内存中开拓了一块空间,节省资源同时减少了dom操作,提升整体性能;
  2. 在页面中设置事件解决程序的时间大大减少了;
  3. 对于新增的元素也会有之前的事件;
  4. 不需要对事件委托的元素手动移除事件解决程序。

事件委托的使用

为了更深刻的了解事件委托,我们一起来看一个案例吧。
在我们的日常操作中,少不了和增删改查打交道,而在我们给元素增加事件的时候,在没有事件委托时,我们需要获取所有元素并遍历,给每个元素增加一个删除事件。达到删除对应行的效果。
而这种增加事件的方式,很容易导致的问题就是之后追加的元素没有对应的事件。
对于上述的,如在事件绑定之后追加元素的、通过ajax渲染数据等,都可以通过事件委托来实现。

未进行事件委托.gif

撇开追加元素的逻辑,我们来看看删除事件是怎样增加上的,这样增加事件的结果,就是如上图所示。接着,我们来实现一下事件委托的方式。

    let myTable = document.getElementById('table');    let myTBody = myTable.getElementsByTagName('tbody')[0];    let myBtn = document.getElementById('btn');    let delBtns = myTBody.getElementsByTagName('button');    let id = 2;    for(let i = 0; i < delBtns.length; i++) {        delBtns[i].onclick = function() {            let tr = this.parentNode.parentNode;            myTBody.removeChild(tr);        }    }

事件委托的实现

将button的事件代理商到table上,在事件解决程序内部通过event事件对象的target属性配合switch语句来确保当前点击的是button,当点击button的时候,执行删除操作;这里用switch的起因是为了还可以再同时判断多个target
当然了,实际使用的时候,我们一般不使用target.tagName,由于直接使用标签名容易导致冲突,所以我们实际使用时一般都使用className来进行判断

    myTable.onclick = function(e) {        let event = e || window.event;        let target = event.target || event.srcElement;        let tagName = target.tagName;        switch (tagName) {            case 'BUTTON':                let myTr = target.parentNode.parentNode;                myTr.parentNode.removeChild(myTr);                break;            default:                break;        }     /*  假设当前删除按钮的类名为del         let className = target.className;         switch (className) {            case 'del':                let myTr = target.parentNode.parentNode;                myTr.parentNode.removeChild(myTr);                break;            default:                break;        }      */    };

事件委托.gif


你如何优化自己的代码?

  1. 命名规范;
  2. 注释覆盖率50%以上;
  3. 避免全局变量;
  4. 避免修改原生API;
  5. 拆分函数,避免函数过于臃肿;
  6. 函数专注于做一件事情;
  7. 板块化封装;
  8. 组件化开发;
  9. 对于常量始终保持先定义后使用;
  10. 对于两个分支的判断,使用三目运算符,对于多个分支的判断使用switch语句;
  11. 减少DOM操作,减少页面重绘;
  12. 尽可能使用 === 而不是 ==,避免隐式转换。


什么是盒模型?

在我们的HTML页面中,每一个元素都可以被看成一个盒子,而这个盒子由:内容(content)、内边距(padding)、边框(border)、外边距(margin) 四部分组成。
对于盒模型,分为标准盒模型和怪异盒模型两种。

标准(W3C)盒模型

标准盒模型的范围包括margin、border、padding、content,并且宽高只包含content,不包含其余部分。

标准盒模型.png

怪异(IE)盒模型

怪异盒模型的范围包括margin、border、padding、content,和标准盒模型不同的是,怪异盒模型的宽高包含了padding和border。

IE盒模型.png

在css3中,我们可以通过box-sizing属性来修改元素的盒模型。

div {    box-sizing: border-box;  // 怪异盒模型    box-sizing: content-box;  // 标准盒模型}


行内、块元素、空元素分别举例

块级元素

div、p、ul、ol、dl、li、dt、dd、form、h1、h2、h3、h4、h5、h6、table、thead、tbody、tfoot
H5新添加
header、main、footer、aside、article、address、blockquoke、audio、video、section···

行内元素

span、a、b、u、i、label、em、strong、del、sub、sup、code

行内块元素

img、input、button

空元素

br、meta、hr、link


src和href的区别

首先看一下使用src属性的元素和使用href属性的元素:
使用src的元素

  1. <img src="haochenguang.png" />
  2. <iframe src="home.html"><iframe>
  3. <script src="index.js"></script>

使用href的元素

  1. <link href="app.css" />
  2. <a href="https://baidu.com">百度一下</a>

接着,我们来比照一下这些标签的区别:

  1. 使用src属性的元素,例如img、iframe、script,假如src路径出现问题的话,页面的内容会受到影响,客户没有办法看到页面原本应该显示的内容和使用页面应该实现的功能。
  2. 使用href属性的元素,例如link、a,假如href路径出现问题的话,页面不会有很大的影响,对于样式文件来说,只是影响页面的美观度,而不会影响页面的正常浏览和使用,对于超链接来说,只是页面无法与其它页面建立链接,对当前页面的影响也不大。

由此,我们可以总结:

src表示引用资源,是页面不可少的一部分,它会替换掉当前的元素,而href是关联,是将当前页面与指定资源建立链接。


假如本文对您有帮助,可以看看本人的其余文章:
前台常见面试题(十)@郝晨光
前台常见面试题(九)@郝晨光
前台常见面试题(八)@郝晨光

结言
感谢您的查阅,本文由郝晨光整理并总结,代码冗余或者者有错误的地方望不吝赐教;菜鸟一枚,请多关照

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台常见面试题(十一)@郝晨光

发表回复