JS查缺补漏之事件和模块化

114 阅读3分钟

事件流

事件流分为IE事件流和网景公司事件流,二者的区别在于,IE事件流称为事件冒泡,是从被响应的元素依次往document根对象往上响应,网景公司事件流是从document根对象往下响应被操作的元素。一般的我们都使用IE事件流。

事件流的阶段

事件流分为三个阶段,事件捕获、到达目标和事件冒泡。事件捕获就是点击事件发生的时候开始,然后实际点击的元素接收到事件,最后开始事件冒泡

事件处理

事件处理可以使用DOM1的元素单元素事件赋值处理函数,即on****事件,每个单元素事件只能赋值一个处理函数。设置其处理事件为Null可以移除事件。 第二种是DOM2的addEventListner,分别传入三个参数,事件名称,处理事件函数,是否在冒泡阶段调用的布尔值。 该处理事件能够处理同一个元素多个相同事件。但是必须要用remove EventListner移除事件,直接赋值null是不行的。

取消默认行为和阻止冒泡

DOM事件中,使用处理函数的event回调参数中的preventDefault可以取消原有事件的默认行为,比如a链接的跳转行为。event.stopPropagation可以阻止元素的冒泡。

CoomonJs和es6的模块化

CommonJS规范,该规范主要用于在服务端实现模块化,不可以在浏览器端使用,如果需要在浏览器端使用,需要额外处理。该规范使用module.exports导出模块,require关键字进行引入,但是这里要注意,require引入的模块是个单例模块,也就是说,第一次加载的模块会被缓存,后续在加载模块使用的都是同一个对象,这里要注意。对了,require是同步操作哦。ES6模块,可以在script中加入type = ‘modules’来定义一个模块化脚本。但是一般的我们都是在js中完成的。该规范使用important 关键字引用,使用export导出模块。导入和导出模块必须在模块顶级作用域中使用,不得在代码块中使用。分为了默认导出和命名导出。

两种模块化的区别

CommJS和require在作用域下有区别。CommJS引入模块,会将模块的可变值(比如引用类型)的变量引入到当前作用域,因此不同文件中require同一个模块并且更改了其中的可变值,会影响到其他引用该模块的相同模块。而ES6模块化则是创建这个模块的实例,是在引用实例的作用域中去操作的,因此哪怕修改了其中的值,也不会影响到其他模块。

es6模块化是异步操作,导入的模块会在加载完毕之后执行,不会阻塞当前线程代码运行。require则是同步操作,会影响代码运行