方式一:
<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事件模型是前端开发中处理用户交互的核心机制之一,主要包括了事件捕获、目标阶段和事件冒泡三个阶段,这个模型被广泛地理解为...
JavaScript中的Event对象是事件处理的核心部分,它包含了与事件相关的所有信息,如事件类型、触发事件的元素、鼠标和键盘的状态等。以下是对Event对象及其重要属性的详细解释: 1. **altKey**:这个属性用于检查...
《z-pager.js分页插件详解》 在网页开发中,当数据量过大时,为了提高用户体验,通常会采用分页的方式来展示信息。这里我们要介绍的是一款名为`z-pager.js`的分页插件,它能帮助开发者快速、高效地实现网页分页功能...
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 对象,如...
**sockjs-0.3.4.min.js工具包详解** `sockjs-0.3.4.min.js`是SockJS的一个版本,这个版本进行了压缩优化,以减小文件大小,提高页面加载速度。"min"通常代表“minified”,即经过压缩和混淆处理,使得代码更难阅读...
JavaScript之Event详解 Event对象是JavaScript中一个非常重要的概念,它代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。Event对象只在事件发生的过程中才有效。Event的某些属性只对...
### 文件上传组件 Uploadify-3.1-Demo实例详解 #### 概述 Uploadify是一款功能强大且易于使用的文件上传组件,它通过Flash技术实现,能够帮助开发者在Web应用中轻松实现文件上传功能。本篇内容将围绕Uploadify 3.1...
### JavaScript Event.keyCode 大全解析 #### 一、概述 在JavaScript中,`event.keyCode`是用于捕获键盘事件中的键码的一种方式。虽然在现代Web开发中更推荐使用`event.key`或`event.code`来获取按键信息,但在...
**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年,尽管现在已经...