3.0 Dom事件 Ajax Bom - 黑山（ Dom ）1.什么是事件传播？事件执行顺序？首先我们要理解什么是事件传

1.什么是事件传播？事件执行顺序？

首先我们要理解什么是事件传播，那我们需要从一些比较基础的概念进行一些简单的理解

关于事件流当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫做DOM事件流，元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种
冒泡事件：微软提出的事件由子元素传递到父元素的过程，叫做冒泡
捕获事件：网景提出的事件由父元素到子元素传递的过程，叫做事件捕获总的归结一下Dom事件流可以归纳为下面 3 个阶段：

事件捕获阶段（捕获：事件触发的时候，事件顺序从外到内依次触发）
处于目标阶段（目标：事件触发的 DOM 对象本身）
事件冒泡阶段（冒泡：事件顺序从外到内依次触发）

ps: 若均为捕获或者均为冒泡，则先按代码先后顺序触发

2.什么是事件冒泡

事件冒泡是指事件的响应会像水泡一样上升至最顶级对象
有些情况下，事件冒泡是人为设计的，但是大多数情况下，冒泡需要禁止。在原生Javascript代码中，有两种禁用方式：

IE内核浏览器

window.event.cancelBubble = true;

W3C内核浏览器

dom对象.事件 = function(event) {
   event.stopPropagation();
}

在jQuery中其对W3C的支持非常好，所以jQuery中只需要通过event.stopPropagation()就可以实现对冒泡的禁止。

3.什么是事件捕获

事件捕获流的思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件，由上至下

4.`event.stopPropagation()` 和`event.stopImmediatePropagation（）` 方法之间的区别

作用：均为阻止事件的冒泡或捕获

注意：很多人将`stopPropagation()`和`preventDefault()`混淆，后者为阻止默认事件，a链接，表单submit提交之类的事件

stopPropagation(): 会阻止事件继续分发到其他document节点,但是当前节点绑定的多个事件会继续按注册的顺序执行
stopImmediatePropagation(): 不仅阻止事件继续分发到其他document,还会将事件分发就地停止,在当前事件之后注册的其他事件,都不会执行

5.如何知道元素中是否使用了 `event.preventDefault()` 方法

我们可以在事件对象中使用event. defaultpreventing属性。它返回一个布尔值，指示是否在特定元素中调用了event.preventDefault()。

6`.mouseover`和`mouseenter`两个事件有什么区别？

二者的本质区别在于,mouseenter不会冒泡 mouseover：会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter) 共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.

7.`Event`对象中，`target`和`currentTarget`的区别？

event.target 返回触发事件的元素，始终指向触发该事件的元素 event.currentTarget 返回绑定事件的元素，指向当前事件处理函数绑定的元素栗子

  var ul = document.getElementById("ul");
        ul.onclick = function(event){
            var tar = event.target;
            var current = event.currentTarget;
            var tagName = tar.nodeName.toLowerCase();
            console.log(tar == current);
            event.preventDefault();
        }

当我们点击li的时候为什么输出为false呢？
首先我们触发该事件的元素是li 所以 target上的指向值一直为 li 而 currentTarget 则一直指向为绑定事件的元素 ul 所以是错误的

但是，我们点击 ul 的时候输出就变成了 true 为什么呢？这里我们的触发事件的元素变成了 ul 所以 target上的指向值就变成了 ul 而 currentTarget 则一直指向为绑定事件的元素 ul 所以是对的这样子理解了

8.怎么阻止事件冒泡？怎么阻止默认事件？什么是事件委托？

阻止事件冒泡

Vue

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

纯Js

event.stopPropagation()

默认事件

Vue

<!-- 阻止单击事件冒泡 -->
<div @click.prevent="doSomething($event)">vue阻止默认事件</div>

纯Js

event.preventDefault()

事件委托

事件委托: 子元素委托父元素
什么情况下用事件委托：当要给一组元素添加相同事件时，可以直接添加给父亲
事件委托原理：事件冒泡，当触发子元素的事件时，通过冒泡，事件传递给父亲，父亲身上绑定有事件处理程序，进而触发

9.css3有什么属性开源影响js中的事件？可以讲一下pointer-events和touch-action属性吗？

css3有什么属性开源影响js中的事件
1. pointer-events
2. touch-action
pointer-events和touch-action属性
1. pointer-events：属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target
2. touch-action：用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。

10.bind和on的区别，js的事件绑定方式有哪些？

bind和on的区别

	参数	是否可以指定具体的子元素	是否可以绑定没有页面渲染时不存在的dom	定义
on	event(事件)、selector(选择器)、data(数据)、function(执行函数)	可以	可以	在被选元素及子元素上添加一个或多个事件处理程序
bind	event(事件)、data(数据)、function(执行函数)	不可以	不可以	向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

Vue中的 v-bind和v-on：

v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href
v-on 指令用于绑定HTML事件：v-on:click 缩写为 @click js的事件绑定方式

在DOM元素中直接绑定这里的DOM元素，可以理解为HTML标签。JavaScript支持在标签中直接绑定事件，语法为：

onXXX="JavaScript Code"

其中： onXXX 为事件名称。例如，鼠标单击事件 onclick ，鼠标双击事件 ondouble，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。 JavaScript Code 为处理事件的JavaScript代码，一般是函数。例子：

<input  onclick="myAlert()"  type="button"  value="点击我，弹出警告框" />
<script type="text/javascript">
function myAlert(){
    alert("谢谢支持");
}
</script>

2、在JavaScript代码中绑定例子

<button id="btn2">js事件绑定</button>

 document.getElementById("btn2").onclick = show;
 document.getElementById("btn2").onclick = print;
//只能触发print方法，如果需要同时触发两个方法，只能使用事件监听

3、事件监听：只可以在该元素的事件监听中看到

<button id="btn3">事件监听</button>      

//show和print两个方法都可以触发
document.getElementById("btn3").addEventListener("click",show);
document.getElementById("btn3").addEventListener("click",print);

//移除事件监听
document.getElementById("btn3").removeEventListener("click");

3.0 Dom事件 Ajax Bom - 黑山（ Dom ）