方式一：
<script></script>写在</body>前面，不会出现加载顺序而导致方法未定义
event01.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
</script>
</head>
<body>
<ul>
<li>aaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbb</li>
<li>cccccccccccccc</li>
<li>dddddddddddddd</li>
<li>eeeeeeeeeeeeee</li>
</ul>
<input type="button" value="点击一下" id="btn"/>
<script type="text/javascript">
var btn = document.getElementById("btn");
//可以通过如下方式来绑定事件，这样绑定事件，就可以完成事件和html的解耦合操作
//在开发中通常都是使用这种方式来绑定事件
//这个事件的处理函数中默认有一个event的参数，用来获取相应的事件信息
btn.onclick = function(event) {
//特别注意：对于IE而言，不会自动传递event这个参数进去，IE需要通过window.event来获取事件
//但是FF却不支持window.event，所以通常使用如下方式解决
event = event||window.event;
alert(event.type);
//this就表示这个按钮对象
alert(this.value);
}
</script>
</body>
</html>
方式二：
通过window.onload来加载，可避免加载顺序而报错
event02.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
//当窗口加载完毕之后才执行init方法，这样可以省略body中的onload
//所以如果希望使用如下的事件定义方式，需要先完成html信息的加载
window.onload = init;
/**
* 此时init方法是在body的onload之后执行，就等于在所有的页面标签加载完毕之后才执行init,此时节点就存在了
*/
function init() {
alert("abc");
var btn = document.getElementById("btn");
/**
* 如下绑定方式带来最大的一个问题是如果将该段代码放到head中定义，在执行到绑定事件的时候并没有把html的标签
* 渲染出来，所以通过DOM得到的节点都是null的，就报错了，解决这个问题的方法是在页面加载完成之后才调用以下这段代码
* 可以在body中的通过onload事件来处理
*/
btn.onclick = function(event) {
//特别注意：对于IE而言，不会自动传递event这个参数进去，IE需要通过window.event来获取事件
//但是FF却不支持window.event，所以通常使用如下方式解决
event = event||window.event;
alert(event.type);
//this就表示这个按钮对象
alert(this.value);
}
}
</script>
</head>
<body>
<ul>
<li>aaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbb</li>
<li>cccccccccccccc</li>
<li>dddddddddddddd</li>
<li>eeeeeeeeeeeeee</li>
</ul>
<input type="button" value="点击一下" id="btn"/>
</body>
</html>
相关推荐
### JavaScript中的Event详解 #### 一、Event概念与特性 在JavaScript中，`event`对象是浏览器提供的一个标准对象，用于表示用户与网页交互时发生的各种事件的状态。这些事件包括但不限于用户点击、移动鼠标、按下...
Event对象则是JavaScript事件处理中的核心，它包含了与特定事件相关的所有信息，如事件类型、事件目标等。 在深入讲解Window对象和Event对象之前，我们先了解一些基础概念。JavaScript是一种基于原型的动态类型语言...
标题提到的“js事件详解-0-1-2级模型”涉及到了JavaScript中事件的分层模型。JavaScript事件模型是前端开发中处理用户交互的核心机制之一，主要包括了事件捕获、目标阶段和事件冒泡三个阶段，这个模型被广泛地理解为...
《z-pager.js分页插件详解》 在网页开发中，当数据量过大时，为了提高用户体验，通常会采用分页的方式来展示信息。这里我们要介绍的是一款名为`z-pager.js`的分页插件，它能帮助开发者快速、高效地实现网页分页功能...
JavaScript中的Event对象是事件处理的核心部分，它包含了与事件相关的所有信息，如事件类型、触发事件的元素、鼠标和键盘的状态等。以下是对Event对象及其重要属性的详细解释： 1. **altKey**：这个属性用于检查...
JavaScript 中的 event 对象是前端开发中处理用户交互的核心机制。它代表了一个事件的状态，事件可以是用户的鼠标动作、键盘输入、文档加载完成等。event 对象在事件触发时创建，并且只在事件处理程序执行期间有效。...
### JavaScript Event 事件详解 #### 一、Event 概述 在JavaScript中，`Event`对象扮演着极其重要的角色，它不仅代表着一个事件的状态，还提供了处理这些事件的方法与属性，使得开发者能够轻松地实现与用户的交互...
《jQuery 1.3.2.min.js：JavaScript的精髓与应用》 jQuery，这个小巧而强大的JavaScript库，自2006年发布以来，就以其简洁的API和强大的功能深受开发者喜爱。在本文中，我们将深入探讨jQuery 1.3.2.min.js这一经典...
javascript Event 对象详解定义 在 JavaScript 中，Event 对象是事件状态的代表，它包含了事件发生的元素、键盘状态、鼠标位置和鼠标按钮状态等信息。一旦事件发生，浏览器的内存中就会生成相应的 Event 对象，如...
JavaScript之Event详解 Event对象是JavaScript中一个非常重要的概念，它代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。Event对象只在事件发生的过程中才有效。Event的某些属性只对...
### 文件上传组件 Uploadify-3.1-Demo实例详解 #### 概述 Uploadify是一款功能强大且易于使用的文件上传组件，它通过Flash技术实现，能够帮助开发者在Web应用中轻松实现文件上传功能。本篇内容将围绕Uploadify 3.1...
**jQuery工具包详解** jQuery，一个轻量级、高性能的JavaScript库，自2006年发布以来，因其简洁易用的API而迅速成为Web开发领域中最受欢迎的库之一。在给定的压缩包文件中，包含了两个重要的版本：`jquery-1.5.1....
在JavaScript编程语言中，`window.event`对象是一个特殊对象，它与浏览器的事件处理机制紧密相关。这个对象在大部分浏览器环境中（尤其是老版本的IE）是全局可用的，提供了当前事件的相关信息。本文将深入探讨`...
《事件驱动I/O模型详解与源码分析》 在计算机编程领域，事件驱动I/O（Event Driven Input/Output）是一种高效且灵活的处理并发请求的编程模型，它广泛应用于网络服务、图形用户界面（GUI）以及现代微服务架构中。本...
window.event对象是JavaScript中一个特殊的对象，它代表当前发生的事件的状态，包括触发事件的元素、鼠标位置和按键状态等信息。window.event对象仅在事件处理函数运行期间有效，因此它是事件处理函数的局部变量。每...
**jQuery-1.4.3.js 和 jQuery API 知识点详解** jQuery 是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。jQuery-1.4.3.js是该库的一个特定版本，发布于2010年，尽管现在已经...
### JavaScript Event.keyCode 大全解析 #### 一、概述 在JavaScript中，`event.keyCode`是用于捕获键盘事件中的键码的一种方式。虽然在现代Web开发中更推荐使用`event.key`或`event.code`来获取按键信息，但在...
《jQuery时间选择器插件——jquery-timepicker.js详解》 在网页开发中，用户界面的交互性和用户体验至关重要，其中日期和时间的选择是一个常见的需求。为了简化这一过程，开发者们经常使用时间选择器插件。本文将...