<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
<script type="text/javascript">
function loadWindow() {
console.log("文档加载完毕...");
}
</script>
</head>
<!--
事件
事件中几个名间
事件源:给什么元素/标签绑定事件
事件名、绑定什么事件
事件监听：浏览器窗口
执行函数：事件触发后需要执行什么代码
常用的事件类型
onload 当页面或图像加载完后立即触发
onblur 元素失去焦点
onfocus 元素获得出点
onclick 鼠标点击某个对象
onchange 用户改变域的内容
onmouseover 鼠标移动到某个元素上
onmouseout 鼠标从某个元素上离开
onkeyup 某个键盘的建被松开
onkeydown 某个键盘的建被按下
事件流
事件冒泡:事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点(文档)
事件捕获:事件开始时由文档节点接受，然后逐级向下传播到具体的元素节点
事件处理程序(事件绑定方式)
1。HTML事件处理程序
直接在html元素上绑定事件
2.DOMO级事件
先获取事件源，再给事件源绑定事件
不能同时给元素绑定相同事件多次
3.DOM2级事件
事件源.addEventListenter("事件类型"，执行函数， true)
注：通过id属性值获取节点对象
document.getElementById("id属性值")；
-->
<!--
onload事件:当文档(HTML页面)加故完毕后执行
-->
<body onload="loadWindow()">
<!--
onclick事件: 点击事件(单击事件)
onmouseout事件: 鼠标移开事件
-->
<button onclick="test()" onmouseout="outButton()">按钮</button>
<!--常用事件类型-->
<!--
onblur事件:失焦事件
onfocus事件:聚焦事件
-->
姓名: <input type="text" onblur="aa()" onfocus="bb()"/>
<!--
onchange事件:元素的值发生改变时触发的事件
-->
城市:<select onchange="changeCity()">
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<hr>
<!-- HTML事件处理程序-->
<button type="button" onclick="alert('Hello')">按钮1</button>
<!-- DOMO级事件-->
<button type="button" id="btn2">按钮2</button>
<!-- DOM2级事件-->
<button type="button" id="btn3">按钮3</button>
<script type="text/javascript">
function loadwindow() {
console.log("文档加载完毕... ");
}
function test() {
console.log("按钮被点击了..." );
}
function aa() {
console.log("失去焦点了... " );
}
function bb( ) {
console.log("聚焦了..." );
}
function changeCity() {
console.log("值改变了..." );
}
function outButton() {
console.log("鼠标离开按钮了..." );
}
/*DOM0级事件*/
// 1.事件源:获取事件源(按钮)
var btn2 = document.getElementById("btn2");
console.log(btn2);
//2.事件类型:给事件源绑定指定事件 3．执行函数:事件触发后要执行的代码
btn2.onclick = function(){
console.log("按钮2被点击了..." );
}
btn2.onmouseout = function(){
console.log("鼠标离开按钮2了... " );
}
btn2.onclick = function(){
console.log("按钮2被点击了2...");
}
/*DOM2级事件*/
// 1。事件源:获取事件源(按钮)
var btn3 = document.getElementById( "btn3" );
//添加事件监听
btn3.addEventListener( "click", function( ){
console.log("按钮3被点击了...");
}, false);
function btnFunction( ){
console.log("鼠标离开按钮3了..." );
}
btn3.addEventListener("mouseout", btnFunction, false);
</script>
</body>
</html>
