原生js大总结八

071、如何组织事件冒泡

 

利用事件对象属性：stopPropagation 和 cancelBubble

 

stopPropagetion是一个方法：e.stopPropagetion();

 

cancelBubble的值是一个常量：e.cancelBubble = true;

 

072、什么是事件监听、事件绑定、事件委托？

 

事件监听：为同一个对象的同一个事件绑定多个事件处理程序

 

事件绑定：对DOM元素绑定事件处理函数  一般分为三种  1、在DOM元素中直接绑定  2、在js中绑定  3、绑定事件监听函数

 

事件委托：利用冒泡的原理，把事件加到父级上，触发执行效果

 

事件委托的好处：

 1、实现对未来元素事件的绑定

          未来元素：绑定事件时，页面上还不存在的元素

 

 2、减少事件绑定，提高性能

 

073、事件监听的方法及如何解绑事件

 

事件监听方法：

 

addEventListener()       attachEvent()

 

解绑事件

 

removeEventListener()    detachEvent()

 

 

074、谈谈你对事件监听的理解  (最好背会，因为太多就适当抄写3遍意思意思吧)

 

1、事件分为DOM 0级事件和Dom 2级事件，DOM2级事件也叫做事件监听。DOM 0级事件的缺点是如果事件相同 后者的事件会覆盖前者的事件，DOM2级事件可以解决这个问题

 

2、DOM2级事件的方法是 

 

    addEventListener() 

        参数1：事件类型  不需要加on   

        参数2：回调函数    

        参数3：布尔值  true代表捕获   false代表冒泡

    

    解绑事件方法：removeEventListener()    

 

 

    但是IE不支持此方法

    IE浏览器下用：attachEvent()

        参数1：事件类型  需要加on

        参数2：回调函数

 

    解绑事件方法：detachEvent()

 

 

3、事件流、事件冒泡、事件捕获

 

        当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫做DOM事件流

 

        元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种

 

        冒泡事件：微软提出的   事件由子元素传递到父元素的过程，叫做冒泡

 

        捕获事件：网景提出的   事件由父元素到子元素传递的过程，叫做事件捕获

 

4、IE与火狐的事件机制有什么区别?

        事件处理机制：IE是事件冒泡、火狐是 事件捕获;

 

5、事件代理/事件委托

    利用冒泡机制，将子元素的事件委托给父元素去监听(给父元素添加事件)，当子元素触发事件时，事件冒泡到父级如果希望指定的子元素才能触发事件，可以通过事件对象(event)获得事件源(target)，然后通过       条件判断是不是期望的子元素，如果是的话，执行事件，否则不执行

        

6、事件委托的好处

     1、实现对未来元素事件的绑定

 

     2、减少事件绑定，提高性能

 

7、如何找到事件源

     var target = e.target||e.srcElement

 

         tagName能找到事件源的元素名

 

 

75、什么是cookie?

 

会话跟踪技术

 

特点：

 

1、大小限制(不能超过4K)

 

2、每个域下cookie不能超过50个

 

3、有效期（和设定时间有关），过了有效cookie会自动删除

 

4、cookie读取（只能访问同一个域名下的cookie）

 

5、cookie只能是字符串（文本文件）

 

76、封装cookie  获取cookie  设置cookie

 

//设置cookie

function setCookie(_name,_val,_expires){

    var d = new Date();

    d.setDate(d.getDate()+_expires);

    document.cookie = _name+'='+_val+';path=/;expires='+d.toGMTString();

}

 

//删除cookie

function removeCookie(_name,_val){

    setCookie(_name,_val,-1);

}

 

 

//获取指定cookie

 

function getCookie(_name){

    var str = document.cookie;

    var arr = str.split('; ');

    var len = arr.length;

    for(var i=0;i<len;i++){

        var newarr = arr[i].split('=');

        if(newarr[0]==_name){

            return newarr[1]

        }

    }

}

 

77、什么是高内聚、低耦合

 

耦合性：指各个模块之间的联系程度，模块之间的联系越紧密那么耦合性就越高，在面向对象中模块是相对独立的，因此耦合度越低那么越好

 

内聚性：内聚指的是模块内部高内聚，模块内部相对独立，独立性越强，内聚度越高。既一个模块内部各个元素彼此之间的紧密联系,联系越紧密内聚度越高

 

两者之间并不矛盾，就相当于严以律己、宽以待人

 

78、创建正则表达式？区别

 

字面量形式：//

 

构造函数：var reg = new RegExp(表达式,参数);

 

区别：

    1、字面量方式中出现的一切都是元字符,所以不能进行变量值的拼接，而实例创建的方式是可以的。

 

       2、字面量中直接写\d就可以，而在实例中需要把它转译\\d

 

79、ES6中let、const有哪些特点？

 

let:

    1、变量不允许被重复定义

    2、不会进行变量声明提升

    3、保留块级作用域中i的值

 

const:

    1、常量值不允许被改变

    2、不会进行变量声明提升

 

80、简单阐述ES6的箭头函数与普通的函数区别？

 

1、书写上用=>代替了function 

 

2、普通函数的this指向window   而ES6箭头函数里面的this指向定义时的那个对象  而不是运行时的那个对象