事件:一般用于浏览器与用户操作进行交互
js事件的三种模型:内联模型、脚本模型、DOM2模型
内联模型:事件处理函数是HTML标签的属性
<input type="button" value="点击" onclick="test()" />
脚本模型:事件处理函数谢谢脚本中从而达到层次分离的原则
document.onclick=function(){ //处理逻辑 }
DOM2模型:
一、如何获得事件函数
function testEvt(){
var len=arguments.length;//获得参数个数
//实际上我们并没有传参 len=1 是应为在事件处理函数中,浏览器会默认传递一个参数 这个参数是事件对象(event)
var arg=arguments[0];//获得这个事件对象event
}
//获得事件对象的兼容写法 ( 参数evt也可以写成event)
function getEvt(evt){
var e=evt || window.event;// window.event IE的规范
return e;
}
二、事件切换机制
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件切换机制demo</title> <style type="text/css"> .red{ 100px; height: 100px; background: red; } .blue{ 100px; height: 100px; background: blue; } </style> <script type="text/javascript"> window.onload=function(){ var div=document.getElementById("div"); div.onclick=onBlue;//1、把onBlue函数付给当前事件 this:是当前点击的对象 /* div.onclick=function(){ //通过匿名函数执行的事件 this:是window alert(this); } */ } function onRed(){ this.className="red"; this.onclick=onBlue;//3、把onBlue函数赋给当前事件 } function onBlue(){ this.className="blue"; this.onclick=onRed;//2、把onRed函数赋给当前事件 } </script> </head> <body> <div id="div" class="red">事件切换</div> </body> </html>