a标签添加onclick事件 怎么传到controll_DOM事件

DOM需知晓的几个点：

1.DOM事件的基本概念：DOM事件的级别

2.DOM事件模型：指的就是捕获和冒泡

3.DOM事件流

4.DOM事件捕获的具体流程

5.Event对象的常见应用

6.自定义事件

1.事件级别：

DOM标准定义的级别：

DOM0：

DOM0 跟事件相关的一个标准就是：

js写法： element.onclick = function(){} 、

html写法： <button οnclick="add()"></button>

DOM2:

element.addEventListener('click',function(){},false);

其中的true，表示这个事件是在捕获的时候触发。

false 就是在冒泡的时候触发。

DOM3：

element.addEventListener('keyup',function(){},false)

这种事件的定义方式，事件类型增加了许多，比如说 鼠标事件，键盘事件等等。

2. 事件模型：捕获和冒泡

捕获是从上往下，冒泡是从当前事件往上。

当在当前对象同时有捕获和冒泡，按绑定顺序执行。

3.事件流：就是浏览器在为这个当前页面与用户做交互的过程中。用户点击了鼠标左键，这个左键是怎么传递的，它又怎么响应的。

第一阶段：捕获。事件通过捕获到达目标元素（目标元素既目标阶段）。

第二阶段：目标阶段。 比如说用户当前点击了这个按钮，这个按钮就是目标阶段

第三阶段：冒泡 。 目标阶段通过冒泡上传到window对象

4.DOM事件捕获的具体流程：

捕获是从上到下的这么一个过程。第一个接收到事件的对象是window ，接着就是document

window——> document ——> html标签——>body——> ...——>一直到目标元素

一般来说 比如我想取到body标签。可以使用window.docment.body来取到， 但是html也能这样吗？？window.document.html????

答案是不行的。

document.documentElement 它是专门一个表示节点对象的。

5.Event对象的常见应用：

Event对象是事件响应中一个很重要的对象。因为我们经常会去获取用户交互的一个参数。

以下5个是常见却很容易出错的。

1）、 event.preventDefault(); ： 阻止默认事件。

比如说，一个a标签，a标签绑定了一个事件。那么在响应函数中，如果设置了event.preventDefault() . 就阻止了a标签的一个默认的跳转行为。

2）、event.stopPropagation() ： 阻止冒泡的一个行为。

比如说，我父元素绑定一个事件，我子元素也绑定一个事件。这时我想子元素执行子元素的事件，父元素执行父元素的事件。

如果你阻止冒泡，当单机子元素的时候，按照冒泡的原理，父元素也会被响应。这个时候就应该添加一个阻止冒泡。

3）、event.stopImmediatePropagation() ：

比如说，一个按钮绑定了两个click事件。click1 和click2. 当我想通过优先的方式，当我想执行click1的时候不要执行click2了

那么怎么办呢？？这时候在click1 事件中加入这么一句，它就能成功的阻止click2 事件的执行。

4）、event.currentTarget ： 值得就是 当前所绑定的事件对象（下面例子中的父元素）

5)、 event.target ：当前被点击的元素 （下面例子中的子元素）

这两个分别代表什么含义？？

eg：事件委托。

比如说 给你一个for循环，给一个dom注册了事件，要怎么优化。

一个父元素有10个子元素，你又不想给10个子元素都绑定一个click元素。那么只要在父级元素上绑定一个事件就可以了。

这个时候就可以使用事件委托。将子元素的事件转移到父元素身上。然后在绑定事件。然后再响应的时候，区分是哪个元素被点击。那么是怎么区分是哪个子元素被点击的呢？

这个时候就是target上场的时候。

6.自定义事件：new Event（） 和 CustomEvent()

两个的区别是 ：new Event（） 只能指定事件名，而CustomEvent 还能在后面加个参数。

自定义事件呢，通过 new Event("事件名")来新建。

eg： ev 是一个dom节点

1. 
   var eat = new Event("eat");
2. 
   ev.addEventListener("eat",function(){
3. 
   console.log('eat');
4. 
   })
6. 
   ev.dispatchEvent(eat);

1.new Event("eat") ： 新建自定义事件并命名

2. 通过DOM2 这种事件的注册方式绑定事件名称：

ev.addEventListener("eat",function(){
console.log('eat');
})

3. 使用 ev.dispatchEvent(eat); 这个事件来触发eve这个对象。

这样就达到了 自定义事件和响应自定义事件。