事件处理程序
事件的名称 click ；load；mouseover；事件处理程序以**‘on**’开头；因此click事件的事件处理程序就是onclick；load事件的事件处理程序就是onload；
HTML事件处理程序可以直接在事件处理程序中，添加执行的函数，也可以进行调用其他地方定义的脚本；
<button oncilck="alert('hello world!')"></button>//执行代码直接添加到事件中
<button onclick='hello()'></button>//调用其他脚本
<script>
function hello(){
alert('hello,world!')
}
</script>
event对象
HTML事件处理程序会创建一个封装着元素属性值的函数，这个函数中有一个局部变量 event ，也就是事件对象。
在用户触发事件，元素执行事件处理函数的时候，默认会向事件处理函数传入一个 event 对象，它记录了该事件的状态和行为。
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3" onclick="log3(this)">box3</div>
<script>
document.getElementById("box1").addEventListener("click", function () {
console.log(event);//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
console.log(event.target);//<div id="box1">box1</div>
})
document.getElementById("box2").onclick = function () {
console.log(event);//PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
console.log(event.target);//<div id="box2">box2</div>
}
function log3(self) {
console.log(self);//<div id="box3" οnclick="log3(this)">box3</div>
console.log(event);
console.log(event.currentTarget);//与console.log(self);输出一致
}
</script>
如果使用html事件属性直接在元素中添加事件（如上例中的 #box3 ），对应事件函数还可以接收一个 this 参数，这个 this 指向元素本身，与event.currentTarget一致
event 常用属性和方法
-
type 事件类型
-
target 事件发出者(触发事件的元素)
-
currentTarget 事件监听者(被绑定事件的元素)
<div class="parent" onclick="clickParent()"> 父元素 <div class="son">子元素</div> </div> <script> function clickParent() { console.log(event.currentTarget); console.log(event.target); } </script>当点击 parent 时，输出：
<div class="parent" onclick="clickParent()">...</div> <div class="parent" onclick="clickParent()">...</div>当点击 son时，输出：
<div class="parent" onclick="clickParent()">...</div> <div class="son">子元素</div> -
stopPropagation() 阻止事件冒泡或捕获
-
cancelable阻止事件冒泡或捕获
-
preventDefault() 阻止浏览器默认行为
<a href="http://www.baidu.com" target="_blank" onclick="handleClick()">百度一下</a> <script> function handleClick() { event.preventDefault()//点击 a 元素不会跳转至链接，什么也不会发生 } </script>