DOM事件
事件
事件：就是对事件作出反应
事件是一件事 Event
JavaScript是由事件驱动的
事件的用处
当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时
事件三要素
事件有三要素：
-
事件对象 事件绑定对象
-
事件名称 是什么
-
事件函数 做什么
常见事件的写法
常见事件写法
-
传统事件绑定
将事件以属性的形式嵌入到HTML标签中
优点：简单易懂省事
缺点：代码混在一起，不利于多人协作开发 -
现代事件绑定（脚本模型）
-
W3C事件
-
常见的事件元素
（1）onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
(2) onchange 事件常用于输入字段的验证。
(3) onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
(4) onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。
<body>
<button "alert('hello');alert('花花')">点我</button>
<button "show()">点击点击</button>
<script type="text/javascript">
function show() {
alert('润');
}
</script>
</body>
事件对象
事件对象：事件对象是由系统创建的，传递给事件函数的
注意：在低版本IE上，事件对象：
window.event
<body>
<button id="btn">点一点</button>
<script type="text/javascript">
var btn=document.getElementById('btn');
btn.function (e){
e=e||window.event;//事件的兼容性写法
alert(e);
}
btn.function(event){
console.log(event);
};
</script>
</body>
导航节点关系
- parentNode、firstChild 以及 lastChild ，在文档结构中进行导航
<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM 很有用!</p>
<p>本例演示节点关系。</p>
</div>
</body>
</html>
- 首个
元素是 元素的首个子元素（firstChild）
-
元素是 元素的最后一个子元素（lastChild）
-
元素是首个
元素和
元素的父节点（parentNode）
DOM 根节点
这里有两个特殊的属性，可以访问全部文档：
document.documentElement - 全部文档
document.body - 文档的主体
html>
<body>
<p>Hello World!</p>
<div>
<p>DOM 很有用!</p>
<p>本例演示 <b>document.body</b> 属性。</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
- childNodes 和 nodeValue
<html>
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
在上面的例子中，getElementById 是一个方法，而 childNodes 和 nodeValue 是属性。
冒泡事件
-
冒泡：
事件由最具体的元素开始，层层向外传递，直到最外层元素 -
捕获：
由最外层元素开始，层层向内传递，直到具体元素 -
阻止事件冒泡：
e.stopPropagation(); -
在IE:
e.cancelBubble=true;