事件

一、 DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
javascrippt中DOM0事件是直接写在html里的事件，比如

DOM2事件是通过addEventListener（IE低版本是通过attachEvent）绑定的 ,比如

var btn=document.querySelector('#btn');
btn.addEventListener('事件类型',函数名)；

二者的区别主要是：
1、DOM0在HTML中书写很方便，但是存在两个缺点：
存在加载顺序问题，如果事件处理程序再html代码之后加载，用户可能在事件处理程序还未完成时就点击按钮之类的触发事件，存在时间差问题。
这样书写，html代码和js代码紧密耦合，维护不方便。
二、 attachEvent与addEventListener的区别？
attachEvent与addEventListener二者都是DOM2事件中的，通常会被t通同时应用于兼容不同版本的浏览器。

attachEvent兼容性.png

addEventListener兼容性.png

二者的区别是：
1、addEventListener()接受三个参数，第一个是要处理程序的事件类型，这个事件类型（事件名称）是字符串，但是不包括用于设置事件处理程序属性的前缀"on"，第二个参数是指定类型的事件发生时应该调用的函数。最后一个参数是布尔值，通常情况下这个参数会传递false，事件发生在冒泡阶段，如果为true则事件发生再捕获阶段
2、而attachEvent()在IE事件模型下不支持事件捕获，所以只有两个参数：事件类型和处理程序函数，且事件类型使用的是带"on"前缀的事件处理程序属性名。
3、addEventListener()对于相同的事件只会注册一次，即使多次的写了注册函数也只会成功注册一个，而attachEvent()允许将相同的事件处理函数注册多次。当特定的事件类型发生时，注册函数的调用次数和注册次数一样。
4、事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window
5、为一个事件添加多个事件处理程序时，执行顺序不同，addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律(添加的方法少的时候大多是按添加顺序的反顺序执行的，但是添加的多了就无规律了)。
三、解释IE事件冒泡和DOM2事件传播机制？
当事件发生在某个文档节点时，目标的事件处理程序就会被触发，此外目标的每个父节点也有机会处理该事件。
IE事件冒泡：事件开始由最具体的元素接收，然后逐级向上传播到不具体的元素。没有捕获阶段，只有目标阶段和事件冒泡阶段。
DOM2事件传播机制：DOM2事件规定事件流包括三个阶段，事件捕获阶段、处于目标阶段、事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段。

四、如何阻止事件冒泡？ 如何阻止默认事件？
非IE浏览器中提供了一个事件对象 stopPropagation,可以阻止冒泡，IE浏览器提供了cancelBubble事件对象可以阻止冒泡，
在IE浏览器中通过returnvalue=false;阻止默认事件；非IE浏览器通过preventDefault()阻止默认事件
五、有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

    
这里是
    
饥人谷
    
前端6班

Paste_Image.png

六、 补全代码，要求：

当点击按钮开头添加时在

这里是

元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
当点击每一个元素li时控制台展示该元素的文本内容。

    
这里是
    
饥人谷
    
任务班


开头添加
结尾添加

Paste_Image.png

七、 补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

    
鼠标放置查看图片1
    
鼠标放置查看图片2
    
鼠标放置查看图片3

Paste_Image.png

八、 在 github 上创建个人项目，把视频里事件兼容的函数写法放入项目，在 Readme.md里描述项目(选做题目)
由于网络过于慢，而且git上东西较多，长时间未更新，一直下不下来，我就在这截图吧

Paste_Image.png

Paste_Image.png

Paste_Image.png