笔记2-3_1_事件

1.DOM发展

DOM0 ,DOM1,DOM2,DOM3

2.事件

定义：事件就是用户或者浏览器自身执行的某种动作。它通过web浏览器通知应用程序发生了什么事情
事件最早是在IE和Netscape首先出现的

3.事件流

事件流描述的是从页面中接收事件的顺序
(当一个事件触发，不只当前元素知道，其父元素，父元素的父元素，…..都知道该事件的发生)
分歧：

1. IE使用的先里后外的方式  事件冒泡

2. Netscape使用的是先外后里的方式  事件捕获

   4.事件流的种类

3. 事件冒泡

4. 事件捕获

5. DOM事件流

   5.事件冒泡

   即事件开始时，由最具体的元素(文档中层次最深的那个节点)接收，然后逐级向上传播到不具体的元素节点。
   兼容性：所有浏览器都支持事件冒泡

   6.事件捕获

   即事件开始时，由不太具体的元素最早接收到事件，而具体的节点(文档中层次最深的那个节点)应该最后接收到事件
   目的： 事件到达预定的节点前捕获这个事件
   兼容性：IE8不支持事件捕获

   7.DOM事件流

   DOM事件流规定，事件流包括三个阶段：

6. 事件捕获阶段

7. 处于目标阶段
8. 事件冒泡阶段

兼容性：IE8及更早版本不支持DOM事件流
IE11在冒泡阶段会跳过document
在具体元素上，会分别触发冒泡和捕获事件

8.事件处理程序

事件是用户或浏览器的某种动作，比如，而响应某个事件的函数，就叫做事件处理程序（事件侦听器）
方式：

HTML事件处理程序（不重要）

方式：在HTML标签上添加事件属性

<div id="myDiv" onclick="alert('hello world');">Click Me</div>
<script type="text/javascript">
  function showMessage () {
    alert('hello world');
  }
</script
<div id="myDiv" onclick="showMessage();" > Click Me </div>

缺点：第2种方法，页面出来之后，函数定义之前点击button，程序会出错
HTML的代码与JavaScript的代码关联度(耦合)太高，如果要更换事件处理程序，就要改动两个地方。（高内聚，低耦合）
不建议使用

DOM0事件处理程序

1.添加事件

var btn = document.getElementById('myBtn');
btn.onclick = function () {
  alert('Clicked!!')
}

2.删除

btn.onclick = null;

3.注意：

1. 处理程序内this指针指向当前事件元素
2. 此方式处理事件，是在事件流的冒泡阶段被处理
3. 重复指定事件处理程序，后指定的会覆盖先前指定的

4. 此方法兼容性较好，几乎所有的浏览器都支持

   DOM2事件处理程序

   后面详细说

   9.事件对象

5. 在触发某个事件时，会产生一个对象event。

6. 这个对象中包含着所有与事件相关的信息。

例如鼠标事件对象中，会包含鼠标位置信息，
键盘操作到时的事件对象，会有按下的按键有关的信息。

1. 所有浏览器都支持事件对象，但是方式不同。

   （当事件触发时，事件处理程序会被浏览器调用，浏览器在调用事件处理函数时，会传递一个实参，该实参就是事件对象，该对象中存储着跟当前时间相关的信息。）

   10.事件对象的获取（兼容性处理）

   var btn = document.getElementById(‘btn’);
   btn.onclick = function (evt) {
   var eventObj = evt || window.event;
   //--> var evnetObj = (evt===undefined ? window.evnent : evt) ;
   alert(eventObj .type)
   }

   IE中的event对象，作为window对象的一个属性存在

   11.事件对象的常用属性和方法

   event.type事件类型

   click、mousemove、keyup、load、scroll
   // IE :event.type

   event.target事件目标

   //IE: event.srcElement ```javascript

   this is button

var div = document.querySelector(‘div’); div.onclick = function(evt){ alert(‘div的target：’+evt.target) //再弹出这个，div的target：[object HTMLButtonElement] }

var a = document.querySelector(‘button’); a.onclick =function(evt){ alert(‘button的target：’+evt.target) //先弹出这个，button的target：[object HTMLButtonElement] }

<a name="lMDj0"></a>
##### event.preventDefault() 取消事件的默认行为
//IE: event.returnValue=false
```javascript
<a href="http://www.baidu.com">go to baidu </a>
var a = document.querySelector('a');
a.onclick = function (evt) {
  evt.preventDefault();
}
//a标签默认打开链接，但添加preventDefault()函数后，便不再打开连接

event.stopPropagation() 阻止事件捕获或冒泡

//IE: event.cancelBubble=true

var p = document.querySelector('p');
p.onclick = function (evt) {
  evt.stopPropagation()
  alert('p的target：'+evt.target)
}//当事件冒泡传到此时，便不会通过这里传向其父元素，但是此标签会收到事件并响应

14.事件代理

利用事件冒泡，监听共同祖先元素的点击事件，当点击了子元素，祖先元素也会收到这个事件并处理

1. 可以方便处理动态生成的元素的事件
2. 节省事件绑定所耗费的资源。

利用事件target属性

<ul>
  <li><spanclass="del">删除</span></li>
  <li><spanclass="del">删除</span></li>
</ul>
document.querySelector('ul').onclick = function (evt) {
  if (evt.target.className === 'del') {
    evt.target.parentNode.outerHTML = '';
  }
} //点击li里的删除，通过监听ul删掉 带有被点击‘删除’的整个li

12.事件默认动作

事件的默认动作是指，即使在JS中没有添加事件处理程序，这个事件依然会执行的某个操作。
例如：点击a标签会跳转页面、在text中按下按键会键入字母，在页面点击鼠标右键会弹出右键菜单、按下F5会刷新页面等等。

event.preventDefault()

13.常用鼠标事件

onmousemove

当鼠标指针在元素内部移动时，重复地触发。

onmousedown

用户按下了任意鼠标按钮时，触发

onmouseup

鼠标抬起

onmouseover

当鼠标指针位于一个元素外部，然后用户将其移入这个元素是触发

onmouseout

当鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。

document.oncontextmenu

当点击鼠标右键时触发这个事件

var inner = document.querySelector('.inner');
var outer = document.querySelector('.outer');
inner.onmouseover = function (evt) {
  console.log(this.className + ':' + evt.type);
}
inner.onmouseout = function (evt) {
  console.log(this.className + ':' + evt.type);
}
outer.onmouseover = function (evt) {
  console.log(this.className + ':' + evt.type);
}
outer.onmouseout = function (evt) {
  console.log(this.className + ':' + evt.type);
}
//从外层元素想里层元素移动时，会触发外层元素的mouseout,然后触发里层的mouseover
//然后触发外层的mouseover(里层元素事件冒泡到外层)