DOM、事件冒泡&事件捕获

DOM
Document Object Model文档对象模型；

DOM改变html属性

<script>
document.getElementById("image").src="landscape.jpg";
</script>

---

使用html的DOM来分配事件

<script>
document.getElementById(" ").onclick=function(){displayDate()};
</script>

• onload／onunload
  用户进入或离开页面时触发；

• onchange
  输入框或文本的字段发生改变；

• onmouseover／onmouseout／onmouseup／onmousedown／onclick
  鼠标相关操作；

< div onmouseover="mOver(this)" onmouseout="mOut(this)" style="">Mouse Over Me< /div>
< script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
< /script>

• onfocus
  获得焦点；

HTML DOM EventListener
使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听；
你可以使用 removeEventListener() 方法来移除事件的监听；

<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click",displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}

• element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

事件冒泡和事件捕获
事件传递有两种方式：冒泡与捕获，事件传递定义了元素事件触发的顺序。
在 *冒泡 *中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 *捕获 *中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);