您的位置：首页 > Web前端 > JavaScript

js 事件

2015-08-08 10:33 579 查看

事件：一般用于浏览器与用户操作进行交互

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{
width: 100px;
height: 100px;
background: red;
}
.blue{
width: 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>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航