原生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指向定义时的那个对象 而不是运行时的那个对象