`

js的event(补充)--js详解(十)

    博客分类:
  • js
阅读更多

方式一:

<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详解

    ### JavaScript中的Event详解 #### 一、Event概念与特性 在JavaScript中,`event`对象是浏览器提供的一个标准对象,用于表示用户与网页交互时发生的各种事件的状态。这些事件包括但不限于用户点击、移动鼠标、按下...

    window对象--event对象详解

    Event对象则是JavaScript事件处理中的核心,它包含了与特定事件相关的所有信息,如事件类型、事件目标等。 在深入讲解Window对象和Event对象之前,我们先了解一些基础概念。JavaScript是一种基于原型的动态类型语言...

    js事件详解-0-1-2级模型.pdf

    标题提到的“js事件详解-0-1-2级模型”涉及到了JavaScript中事件的分层模型。JavaScript事件模型是前端开发中处理用户交互的核心机制之一,主要包括了事件捕获、目标阶段和事件冒泡三个阶段,这个模型被广泛地理解为...

    javascript Event对象详解

    JavaScript中的Event对象是事件处理的核心部分,它包含了与事件相关的所有信息,如事件类型、触发事件的元素、鼠标和键盘的状态等。以下是对Event对象及其重要属性的详细解释: 1. **altKey**:这个属性用于检查...

    z-pager.js分页插件.zip

    《z-pager.js分页插件详解》 在网页开发中,当数据量过大时,为了提高用户体验,通常会采用分页的方式来展示信息。这里我们要介绍的是一款名为`z-pager.js`的分页插件,它能帮助开发者快速、高效地实现网页分页功能...

    JS event使用方法详解

    JavaScript 中的 event 对象是前端开发中处理用户交互的核心机制。它代表了一个事件的状态,事件可以是用户的鼠标动作、键盘输入、文档加载完成等。event 对象在事件触发时创建,并且只在事件处理程序执行期间有效。...

    js-event事件

    ### JavaScript Event 事件详解 #### 一、Event 概述 在JavaScript中,`Event`对象扮演着极其重要的角色,它不仅代表着一个事件的状态,还提供了处理这些事件的方法与属性,使得开发者能够轻松地实现与用户的交互...

    jquery-1.3.2.min.js

    《jQuery 1.3.2.min.js:JavaScript的精髓与应用》 jQuery,这个小巧而强大的JavaScript库,自2006年发布以来,就以其简洁的API和强大的功能深受开发者喜爱。在本文中,我们将深入探讨jQuery 1.3.2.min.js这一经典...

    javascriptEvent对象详解定义.pdf

    javascript Event 对象详解定义 在 JavaScript 中,Event 对象是事件状态的代表,它包含了事件发生的元素、键盘状态、鼠标位置和鼠标按钮状态等信息。一旦事件发生,浏览器的内存中就会生成相应的 Event 对象,如...

    sockjs-0.3.4.min.js工具包

    **sockjs-0.3.4.min.js工具包详解** `sockjs-0.3.4.min.js`是SockJS的一个版本,这个版本进行了压缩优化,以减小文件大小,提高页面加载速度。"min"通常代表“minified”,即经过压缩和混淆处理,使得代码更难阅读...

    javascript之Event详解[定义].pdf

    JavaScript之Event详解 Event对象是JavaScript中一个非常重要的概念,它代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。Event对象只在事件发生的过程中才有效。Event的某些属性只对...

    文件上传组件 Uploadify-3.1-Demo实例详解

    ### 文件上传组件 Uploadify-3.1-Demo实例详解 #### 概述 Uploadify是一款功能强大且易于使用的文件上传组件,它通过Flash技术实现,能够帮助开发者在Web应用中轻松实现文件上传功能。本篇内容将围绕Uploadify 3.1...

    event.keycode大全(javascript)

    ### JavaScript Event.keyCode 大全解析 #### 一、概述 在JavaScript中,`event.keyCode`是用于捕获键盘事件中的键码的一种方式。虽然在现代Web开发中更推荐使用`event.key`或`event.code`来获取按键信息,但在...

    jQuery/jquery-1.5.1.min.js /jquery-1.7.2.min.js等

    **jQuery工具包详解** jQuery,一个轻量级、高性能的JavaScript库,自2006年发布以来,因其简洁易用的API而迅速成为Web开发领域中最受欢迎的库之一。在给定的压缩包文件中,包含了两个重要的版本:`jquery-1.5.1....

    window.event 对象详解

    在JavaScript编程语言中,`window.event`对象是一个特殊对象,它与浏览器的事件处理机制紧密相关。这个对象在大部分浏览器环境中(尤其是老版本的IE)是全局可用的,提供了当前事件的相关信息。本文将深入探讨`...

    event-driven_io-源码.rar

    《事件驱动I/O模型详解与源码分析》 在计算机编程领域,事件驱动I/O(Event Driven Input/Output)是一种高效且灵活的处理并发请求的编程模型,它广泛应用于网络服务、图形用户界面(GUI)以及现代微服务架构中。本...

    javascript中window.event事件用法详解

    window.event对象是JavaScript中一个特殊的对象,它代表当前发生的事件的状态,包括触发事件的元素、鼠标位置和按键状态等信息。window.event对象仅在事件处理函数运行期间有效,因此它是事件处理函数的局部变量。每...

    jQuery-1.4.3.js和jQuery-API

    **jQuery-1.4.3.js 和 jQuery API 知识点详解** jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。jQuery-1.4.3.js是该库的一个特定版本,发布于2010年,尽管现在已经...

Global site tag (gtag.js) - Google Analytics