1. 如何绑定一个事件？有几种方法？

1.onclick(缺点：只能绑定一次)

div.onclick = function () { }

2.addEventListener(‘事件类型’, 处理函数, false)

div.addEventListener(‘click’, function () { }, false)
(优点：可以给一个元素绑定多个事件, 依次执行)

3.IE特有的一个, 类似上面的addEventListener

div.attachEvent(‘on’ + type, function () { })
题目：怎么点击一个li输出其相应的顺序？

  1. var lis = document.getElementsByTagName('li');
  2. for (var i = 0; i < lis.length; i++) {
  3.     (function (n) {
  4.         lis[n].addEventListener('click', function () {
  5.             console.log(n);
  6.         }, false)
  7.     }(i))
  8. }

2. 如何快速输入li a？ li顺序？

ul > li{ a } 4、ul > li{ $ } 4

3. 事件处理程序的运行环境this是什么？

1.ele.onXXX = function (event) { }

程序this指向的是dom元素本身
比如：

  1.     div.onclick = function () {
  2.         console.log(this)
  3.     }

2.obj.addEventListener(type, fn, false);

程序this指向的是dom元素本身
**

3.IE独有的一个方法

obj.attachEvent(‘on’ + type, function);
this指向的是window（了解即可）

4. 怎么解除事件处理？

1.div.onclick = false / null;

比如: 一个只能执行一次的点击事件怎么写？

  1. div.onclick = function () {
  2.     console.log('a');
  3.     this.onclick = null;
  4. }

2.div.removeEventListener(type, function, false);

3.IE独有：div.detachEvent(‘on’ + type, function);

5. 事件处理模型—事件冒泡、捕获是什么？

事件冒泡：

结构上(非视觉上)嵌套关系的元素，同一事件，子元素冒泡想父元素(自底向上)

  1. < div class="a" >
  2.     <div class="b"></div>
  3.  </div >

比如，如果a和b都有点击事件，那么点击b的时候，a事件也会触发，触发顺序：1b 2a

事件捕获

结构上(非视觉上)嵌套关系的元素，同一事件，自父元素捕获至子元素(自顶向下)

  1. <div class="a">
  2.     <div class="b"></div>
  3. </div>
  1. 触发顺序：先捕获、后冒泡<br />focus, blur, change, submit, reset, select等事件不冒泡<br />

下面点击content之后，控制台会输出什么？为什么？

  1.     var box = document.getElementsByClassName('box')[0];
  2.     var content = document.getElementsByClassName('content')[0];
  3.     box.addEventListener('click', function () {
  4.         console.log('boxBubble');
  5.     }, false);
  6.     content.addEventListener('click', function () {
  7.         console.log('contentBubble');
  8.     }, false);
  9.     // 捕获，最后的false变成true
  10.     box.addEventListener('click', function () {
  11.         console.log('boxCatch');
  12.     }, true);
  13.     content.addEventListener('click', function () {
  14.         console.log('contentCatch');
  15.     }, true)


**

6. 如何取消冒泡？

比如document有事件，点击div的时候document的事件会执行，
那么怎么才能点击div的时候，document不执行？

  1.     div.onclick = function (e) {
  2.         //stopPropagation()和cancelBubble = true;都行
  3.         //注意，这里的e是系统自动传入的，包含了事件的各个状态
  4.         e.stopPropagation();
  5.         e.cancelButtle = true;
  6.         this.style.backgroundColor = 'green';
  7.     }

7. 阻止默认事件：

return false; 以对象属性的方式注册的事件才生效
event.preventDefault() w3c标注，IE9以下不兼容
event.returnValue = false; 兼容IE
以上三个，记住第一个就好，其他了解

  1. div.onclick = function (e) {
  2.     return false;
  3.     e.preventDefault();
  4.     e.returnValue = false;
  5. }

也可以, 这样也是取消a的默认事件, 其中void()类似return

8. 什么是事件对象？源对象？有什么作用？啥是事件委托？

IE浏览器会把事件放到window.event, 而不是e上，所有要做个兼容
var event = e || window.event //兼容
事件源对象：
event.target 火狐只有这个
event.srcElement le只有这个
这俩chrome都有，所以还需要写个兼容
var target = event.target || event.srcElement

什么是通过冒泡实现事件委托？

  1. var ul = document.getElementsByTagName('ul')[0];
  2. ul.onclick = function (e) {
  3.     var event = e || window.event;
  4.     var target = event.target || event.srcElement;
  5.     console.log(target.innerText);
  6. }

实现逻辑：点击li事件，会冒泡给ul事件，而ul会找到源事件，然后输出里面的内容
优点: 性能 - 不需要循环所有元素一个个绑定事件
灵活 - 当有新的子元素时不需要重新绑定事件

9. window.onload = function（）{}实现逻辑是什么？

html和css执行的时候是并行解析的。
html执行的时候会形成一个domTree，css会生成cssTree
两个树最后会形成一个树，叫做renderTree，然后才会绘制页面
dom节点的解析：先解析，挂到dom树上，然后另开一个线程去下载

onload必须等待整个文档全部解析完之后，renderTree，图片各种资源全部下载完之后，才会执行

10. 怎么实现拖拽？如何封装成一个函数？

  1. var disX, disY;
  2. div.onmousedown = function (e) {
  3.     var left = div.style.left;
  4.     var top1 = div.style.top;
  5.     disX = e.pageX - parseInt(left);
  6.     disY = e.pageY - parseInt(top1);
  7.     document.onmousemove = function (e) {
  8.         var event = e || window.event;
  9.         div.style.left = e.pageX - disX + "px";
  10.         div.style.top = e.pageY - disY + "px";
  11.     }
  12.     div.onmouseup = function () {
  13.         document.onmousemove = null;
  14.     }
  15. }

封装函数：注意elem必须是定位元素（有position，而且有left=0，top=0，如果没有这俩，left和top就是auto）

  1. function drug(elem) {
  2.     var disX, disY;
  3.     elem.addEventListener('mousedown', function (e) {
  4.         disX = e.pageX - parseInt(elem.style.left);
  5.         disY = e.pageY - parseInt(elem.style.top);
  6.         document.addEventListener("mousemove", test, false)
  8.         function test(e) {
  9.             elem.style.left = e.pageX - disX + "px";
  10.             elem.style.top = e.pageY - disY + "px";
  11.         }
  13.         elem.addEventListener("mouseup", function () {
  14.             document.removeEventListener("mousemove", test, false);
  15.         }, false);
  16.     }, false);
  17. }
  19. drug(div);

11. 事件分类有哪些？

1.鼠标事件有哪些？

click,mousedown,mousemove,mouseup,contextmenu,mouseover,mouseout,mouseseeter,mouseleave

2.mouseover和mouseenter啥关系？

mouseover = mouseenter mouseout = mouseleave
contextmenu是干啥的？取消右键菜单事件

3.怎么判断鼠标左键点击还是右键点击？

只能通过mousedown和mouseup判断。0 / 1 / 2;
DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键

4.如何解决mousedown和click的冲突？

click = mousedown + mouseup
执行顺序：mousedown、mouseup、click
所以出发mousedown的一定会出发mouseup和click
那么怎么可以让他不触发click？

  1. var key = false;
  2. var firstTime, lastTime;
  3. div.onmousedown = function () {
  4.     firstTime = new Date().getTime();
  5. }
  6. div.onmouseup = function () {
  7.     lastTime = new Date().getTime();
  8.     if (lastTime - firstTime < 300) {
  9.         key = true;
  10.     }
  11. }
  12. div.onclick = function () {
  13.     if (on) {
  14.         console.log("aaa")
  15.         on = false;
  16.     }
  17. }

12. 键盘监听事件有哪些？

keydown keypress keyup
执行顺序是什么？
keydown、keypress、keyup

keypress是什么？作用是啥？

keydown没有charCode
keydown可以监听到所有的键盘类按键事件
keypress有charCode

keypress只能监听字符键盘事件。shift和上下左右、ctrl等控制键都不监听。

document.onkeypress = function(e) {
console.log(String.fromCharCode(e.charCode));
}

13. 文本事件有哪些？

input focus blur change
输入事件：文本框输入
聚焦事件：文本框聚焦
失去焦点：文本框失焦
改变：聚焦前和失焦后文本框内容改变

怎么实现输入框？

  1. <input type='text' value='请输入用户名' style='color:#999' 
  2.        onfocus="if(this.value=='请输入用户名') {
  3.                     this.value='';
  4.                     this.style.color = '#424242'
  5.                 }" 
  6.        onblur="if(this.value=='') {
  7.                     this.value='请输入用户名';
  8.                     this.style.color='#999'
  9.                }" />

14. 滚动事件：scroll

  1. window.onscroll = function () {
  2.     console.log(window.pageXOffset + " " + pageYOffset)
  3.     console.log(window.pageXOffset + " " + pageYOffset)
  4. }

当然，必须先有滚动条可以实现滚动才行。可以br*200先实现滚动条