什么是事件: 用户手动触发的或浏览器自动触发的页面内容状态的改变。
浏览器都会监听事件的发生:
1. 自动触发事件处理函数:
事件处理函数: 当事件发生时，自动调用的函数
如何定义:3种:
1. 在html元素的开始标签中:
<button onclick="js语句">
DOM: var btn=document.createElement("button");
btn.onclick=new Function("js语句");
事件发生时: btn.onclick();//事件处理函数
js语句中的this->btn
缺点: 不符合内容与行为分离的原则——不便于维护
2. 在js中，为元素动态绑定事件处理函数: 2种:
1. elem.onclick=function(){
//this->elem
}
事件发生时: elem.onclick();
优点: 符合内容与行为分离的原则——便于维护
缺点: 一次onclick只能绑定一个函数对象
2. elem.addEventListener("事件名",函数对象,捕获)
其中: 捕获: bool：是否在捕获阶段就提前出发
默认为false，默认都在冒泡阶段触发
改为true，当前事件处理函数可在捕获阶段提前触发
btn.addEventListener("click",function(){...})
优点: 同一时刻可为一个onclick绑定多个函数对象
IE8: elem.attachEvent("事件处理函数名",函数对象)
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title> new document </title> | |
| <meta charset="utf-8"> | |
| <script> | |
| function fun(e){//自动获得事件对象 | |
| alert(e.target.id);//e->event | |
| } | |
| window.onload=function(){ | |
| //btn1.addEventListener("click",fun); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <button id="btn1" onclick="fun(event)">click me</button> | |
| <!-- | |
| btn1.onclick=function(){fun(event);); | |
| btn1.onclick(); | |
| --> | |
| </body> | |
| </html> |