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...
}
这种方式会比第一种方式更有“仪式感”，但是缺点也显而易见，只能绑定一次事件，下次绑定会清空上次绑定的事件
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 等等！