事件代理也叫事件委托,是指将要触发的事件绑定到目标元素的父元素上,利用冒泡机制来触发该事件。
一般用在目标元素是动态添加的,无法在初次渲染页面时挂载事件,只能在其父级元素上去代理一下。
或者是不想单独为每个相同的元素都去绑定一个事件,统一用一个父级事件去处理完事了。
更高级一点的使用原因是减少内存占用,如果有100个li就要占100个内存空间去存事件对象,性能有影响,直接绑到父级上,一块处理就完事了。
下面是一个例子:
在ul元素下有很多li,需要给动态添加的li去添加click事件,只能用事件代理的方式,将事件绑定到ul上。
~~~text
parentUl.addEventListener('click', function(e){
var target = event.target || event.srcElement;
if(!!target && target.nodeName.toUpperCase() === "LI"){
console.log(target.innerHTML);
}
}, false);
~~~
在以上代码中,请注意target.nodeName的使用,这个是判断事件触发目标的根本抓手。
- js面试题
- 说一下自己常用的es6的功能?
- 页面渲染html的过程?
- 说一下事件代理?
- 说一下继承的几种方式及优缺点?
- 说一下闭包?
- 对JSONP的理解*
- 基本的数据类型有哪些?
- js程序题
- JS找字符串中出现最多的字符
- 数组去重怎么作?
- 变量提升的这道题你会吗
- 用一段代码思考this的指向问题
- 这些类型的typeof返回什么值?
- 怎样添加、移除、移动、复制、创建和查找节点?
- css面试题
- css水平、垂直居中的写法,请至少写出4种
- 1rem、1em、1vh、1px各自代表的含义?
- 说一下盒模型?
- 清除浮动的几种方式,及原理?
- b与strong的区别?
- img中的alt与title属性?
- 浏览器兼容性
- IE6的BUG你都遇过哪些?怎么解决的?
- html面试题
- 对HTML结构语义化的理解?
- 前端工程化面试题
- webpack
- export和export default的区别?
- VueJs面试题
- 基础
- 生命周期
- vue路由(vue-router)
- 状态管理(vuex)
- axios
- vue-cli框架
- 前端架构面试题
- HTTP
- get、post的区别
- 你所知道的http的响应码及含义?