应该说接触 js 就应该知道事件绑定了,但这里是对 js 事件绑定加深理解
html 中不推荐在 html 中绑定事件,如 onclick,why?
1、onclick 添加的事件处理函数是在全局环境下执行的,这污染了全局环境,很容易产生意料不到的后果;
2、给很多 DOM 元素添加 onclick 事件,可能会影响网页的性能,毕竟网页需要的事件处理函数越多,性能就越低;
3、对于使用 onclick 的 DOM 元素,如果要动态地从 DOM 树中删掉的话,需要把对应的时间处理器注销,假如忘了注销,就可能造成内存泄漏,这样的 bug 很难被发现
事件委托
js 事件流分为事件冒泡和事件捕获,这个在addEventListener 和 removeEventListener中有提到过.但当时遗漏了事件委托.
事件委托它还有一个名字叫事件代理,JavaScript 高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
一般来说,dom 需要有事件处理程序,我们都会直接给它设事件处理程序就好了,那如果是很多的 dom 需要添加事件处理呢?比如我们有 100 个 li,每个 li 都有相同的 click 点击事件,可能我们会用 for 循环的方法,来遍历所有的 li,然后给它们添加事件,那这么做会存在什么影响呢?
在 JavaScript 中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与 dom 节点进行交互,访问 dom 的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少 DOM 操作的原因;如果要用事件委托,就会将所有的操作放到 js 程序里面,与 dom 的操作就只需要交互一次,这样就能大大的减少与 dom 的交互次数,提高性能;
每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,自然性能就越差了,如果用事件委托,那么我们就可以只对它的父级(如果只有一个父级)这一个对象进行操作,这样我们就需要一个内存空间就够了,是不是省了很多,自然性能就会更好。
jsx(其他 mvvm 框架) 中也使用了 onClick 来绑定事件,why?
1、onClick 挂载的每个函数,都可以控制在组件范围内,不会污染全局空间.
onClick 没有直接使用 onclick,是使用了事件委托来处理事件,无论有多少个 onClick 出现,其实最后都只在 DOM 树上添加了一个事件处理 函数,挂在最顶层的 DOM 节点上。所有的点击事件都被这个事件处理函数捕获,然后 根据具体组件分配给特定函数,使用事件委托的性能当然要比为每个 onClick 都挂载一个事件处理函数要高 。
2、在 unmount 的时候自然能够清除相关的所有事 件处理函数,内存泄露也不再是一个问题。
[越努力,越幸运!]