什么是事件委托?为什么要用事件委托?
1.支持为同一个DOM元素注册多个同类型事件
2.可将事件分成事件捕获和事件冒泡机制
用以往注册事件的方法,如果存在多个事件,后注册的事件会覆盖先注册的事件,用addEventListener(type,listener,useCapture)实现
(1)type: 必须,String类型,事件类型
(2)listener: 必须,函数体或者JS方法
(3)useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段
事件捕获和事件冒泡机制
事件捕获
当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件
事件冒泡
当事件到达目标节点后,会沿着捕获阶段的路线原路返回。同样,所有经过的节点,都会触发对应的事件
事件委托的优点:
使用委托可以将同类型的方法绑定到同一个变量上,当调用此变量时就可以一次调用绑定的方法,很方便。
1,提高性能:每一个函数都会占用内存空间,只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
2,动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。
(2)什么是事件委托?为什么要用事件委托?
什么是事件委托?
事件委托,又称事件代理,就是将元素的事件处理交由父元素或者祖先元素来代为执行;
事件委托利用了事件冒泡,只指定一个事件处理程序(函数),就可以管理某一类型的所有事件。
例如:我们只需要在document上绑定一个onclick事件,就可以通过事件冒泡的特性来处理一整个页面上所有的onclick事件,而不必给每一个元素去绑定onclick事件;当然这只是举个栗子,我们正常情况下绝对不会这么去做的。
为什么要用事件委托?
在javascript进行事件处理的时候,每个添加到页面上的事件函数都将直接影响页面的整体性能,每一个函数都是一个对象,都会占用内存,而内存中的对象越多,性能就越差。而为了解决这种问题,我们就需要使用事件委托。
你如何优化自己的代码?
命名规范;
注释覆盖率50%以上;
避免全局变量;
避免修改原生API;
拆分函数,避免函数过于臃肿;
函数专注于做一件事情;
模块化封装;
组件化开发;
对于常量始终保持先定义后使用;
对于两个分支的判断,使用三目运算符,对于多个分支的判断使用switch语句;
减少DOM操作,减少页面重绘;
尽可能使用 === 而不是 ==,避免隐式转换。
什么是盒模型?
html文档中,基本上每个元素都可以看作一个盒子,我们称之为盒子模型。
盒子模型的组成
盒子模型包含四个重要的部分:
content(width、height):盒子内容宽高
padding:内边距(填充)
border:边框
margin:外边距
重点:对于盒子来说,设置的宽高和真实占有宽高是不一样的
行内、块元素、空元素分别举例
(1)行内元素有:a b span img input select strong(强调的语气)
(2)块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
(3)常见的空元素:
<br> <hr> <img> <input> <link> <meta>
鲜为人知的是:
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
src和href的区别
href标识超文本引用,用在link和a等元素上,href是引用和页面关联,是在当前元素和引用资源之间建立联系
src表示引用资源,表示替换当前元素,用在img,script,iframe上,src是页面内容不可缺少的一部分。
网友评论