一、事件概述
JavaScript 事件是由访问 Web 页面的用户引起的一系列操作，例如：用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈。
当用户执行某些操作的时候，再去执行一系列代码。
事件一般是用于浏览器和用户操作进行交互。最早是 IE 和 Netscape Navigator 中出现，作为分担服务器端运算负载的一种手段。直到几乎所有的浏览器都支持事件处理。
而 DOM2级规范开始尝试以一种复合逻辑的方式标准化 DOM 事件。IE9、Firefox、Opera、Safari 和Chrome 全都已经实现了“DOM2 级事件”模块的核心部分。IE8 之前浏览器仍然使用其专有事件模型。
JavaScript 有三种事件模型：内联模型、脚本模型和 DOM2 模型。
二、内联模型
这种模型是最传统的一种处理事件的方法。在内联模型中，事件处理函数是 HTML标签的一个属性，用于处理指定事件。
虽然内联在早期使用较多，但它是和 HTML 混写的，并没有与 HTML 分离导致违反了分层的原则。
<script type="text/javascript">
function box(){
alert("我操");
}
</script>
</head>
<body>
<!--在 HTML 中把事件处理函数作为属性执行 JS 代码 onclick是事件处理函数-->
<input type="button" value="按钮" onclick="alert(‘Lee‘);" />
<!--在 HTML 中把事件处理函数作为属性执行 JS 函数-->
<input type="button" value="按钮" onclick="box();" />
</body>
<script type="text/javascript">
window.onload = function(){
function box(){
alert("我操");
}
};
</script>
</head>
<body>
<input type="button" value="点我" onclick="box()"/> <!--如果box函数放在一个匿名函数里面执行不到 这成了闭包-->
</body>
三、脚本模型
由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，我们可以在 JavaScript 中处理事件。这种处理方式就是脚本模型。
<script type="text/javascript">
window.onload = function(){
var input = document.getElementsByTagName(‘input‘)[0];
//对像.事件处理函数=函数名或者匿名函数
input.onclick=function(){
alert("我操");
}
}
</script>
</head>
<body>
<input type="button" value="按钮" />
</body>
通过匿名函数，可以直接触发对应的代码。也可以通过指定的函数名赋值的方式来执行函数(赋值的函数名不要跟着括号)。
<script type="text/javascript">
function box(){
alert("我操");
}
window.onload = function(){
var input = document.getElementsByTagName(‘input‘)[0];
//对像.事件处理函数=函数名或者匿名函数
input.onclick=box;
}
</script>
</head>
<body>
<input type="button" value="按钮" />
</body>
函数和事件处理函数也可以封装到一起
<script type="text/javascript">
window.onload = function(){
var input = document.getElementsByTagName("input")[0];
input.onclick= box;
function box(){
alert("哈哈");
}
};
</script>
</head>
<body>
<input type="button" value="点我"/>
</body>
时间： 2024-10-28 14:21:33