JS面试易问问题点总结

1、如果需要给html中的某个dom绑定事件，有三种常用方法：　　　　　

　　1.直接写在dom的事件钩子上

<span id="target" onClick="handleClick()">Click me</span>

　　这种方法破坏了dom和js分离的规则，所以不太被推荐，如果面试官让你做题，尽量别这么写，他们会单纯地以为你很low

 　　2.通过js代码注册事件

var target = document.getElementById('target');
target.onclick = function() {
  // do something...
}

　　这种方式会比第一种方式更有“仪式感”，但是缺点也显而易见，只能绑定一次事件，下次绑定会清空上次绑定的事件

 　　3.通过addEventListener来注册事件

var target = document.getElementById('target');
target.addEventListener('click', function() {
  // do something...
}, false);    // 如果不加第三个参数，默认是false

　　这种方式最为灵活，也是被普遍建议采用的事件绑定方式

　　当第三个参数为false时（不传参数时，默认也是这种冒泡方式），点击<span />后，接下来<p />会响应此次事件，然后是<div />，既事件从上往下冒泡

　　当第三个参数为true时，点击<span />后，首先响应事件的是最底层的<div />，随后是<p />，最后才是你点击的<span />  也就是去捕获


　　4.解除绑定事件

　　removeEventListener()   

　　1：相同事件绑定和解除，需要使用共用函数；绑定和解除事件时 事件没有"on" 即onclick写成click

　　2：共用函数不能带参数；

function bodyScroll(event){
    event.preventDefault();
}
document.body.addEventListener('touchmove',bodyScroll,false);
document.body.removeEventListener('touchmove',bodyScroll,false);

2、js阻止事件冒泡

　　1.stopImmediatePropagation() 和 stopPropagation()的区别？（w3c）

　　后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生。

　　2.使用IE的方式来取消事件冒泡 window.event.cancelBubble = true;

3、如何监听dom的变动

　　Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。 Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。 这样设计是为了应付 DOM变动频繁的特点。

var target=document.getElementById('target');
var i=0
var observe=new MutationObserver(function (mutations,observe) {
    i++   
});
observe.observe(target,{ childList: true});
target.appendChild(docuemnt.createTextNode('1'));
target.appendChild(docuemnt.createTextNode('2'));
target.appendChild(docuemnt.createTextNode('3'));
console.log(i)  //1 callback的回调次数

用处：

• 你希望通知 Web 应用程序访问者，他当前所在的页面发生了一些更改。
• 你正在开发一个新的 JavaScript 框架，需要根据 DOM 的变化动态加载 JavaScript 模块。

4.let 、var 、const区别

　　　　var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。

　　　　let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。

　　　　const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

5.link与@import区别

　　　　两者都是外部引用CSS的方式，但是存在一定的区别：
　　　　区别1：link除了引用样式文件，还可以引用图片等资源文件，而import只引用样式文件
　　　　区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
　　　　区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

　　　　区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

6.null和undefined区别

　　　　1.null表示没有对象，即该处不应该有值

　　　　　　作为函数的参数，表示该函数的参数不是对象

　　　　　　作为对象原型链的终点

　　　　2.undefined表示缺少值，即此处应该有值，但没有定

　　　　　　定义了形参，没有传实参，显示undefined

　　　　　　对象属性名不存在时，显示undefined

　　　　　　函数没有写返回值，即没有写return，拿到的是undefined

　　　　　　写了return，但没有赋值，拿到的是undefined

　　　　3.null和undefined转换成number数据类型

　　　　　　 null 默认转成 0

　　　　　 undefined 默认转成 NaN

7.dom0级 、dom2级　　　　

　　　　1. 0级DOM

·　　　　　　一是在标签内写onclick事件

　　　　  　　二是在JS写onlicke=function（）{}函数

　　　　2.  2级DOM

　　　　　　只有一个：监听方法，原生有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。

　　　　　　它们都有三个参数：第一个参数是事件名（如click）；

　　　　　　　　　　　　　　　第二个参数是事件处理程序函数；

　　　　　　　　   　　　　　　第三个参数如果是true则表示在捕获阶段调用，为false表示在冒泡阶段调用。

　　　　　　addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。

　　　　　　removeEventListener():不能移除匿名添加的函数。

　　　　　　只有2级DOM包含3个事件：事件捕获阶段、处于目标阶段和事件冒泡阶段

　　　　3.区别　　　　

　　　　　　如果定义了两个dom0级事件，dom0级事件会覆盖

　　　　　　dom2不会覆盖，会依次执行

　　　　　　dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖

8.call 、bind 、 apply区别

　　　　call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象，第二个参数差别就来了：

　　　　call的参数是直接放进去的，第二第三第n个参数全都用逗号分隔，直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )；

　　　　apply的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ]);

　　　　bind除了返回是函数以外，它的参数和call 一样。

　　　   当然，三者的参数不限定是string类型，允许是各种类型，包括函数 、 object 等等！