`

js的Event--js详解(七)

    博客分类:
  • js
阅读更多
<!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">
	
	function clickD(obj) {
		alert(obj.innerHTML);
	}
	function mouseD(obj) {
		//设置这个对象的颜色,在js中设置文本的样式均通过xx.style.样式名称
		obj.style.color = "#f00";
		//当使用代码来设置样式的时候,如果在css中通过-表示的,都是有驼峰标识,font-size-->fontSize
		obj.style.fontSize = "18px";
	}
	function outD(obj) {
		obj.style.color = "#000";
		obj.style.fontSize = "16px";
	}
	
	var big = true;
	function bigger(obj) {
		var cs = parseInt(obj.style.fontSize);
		if(cs) {
			if(cs>=30) {
				big = false;
				obj.innerHTML = "点击变小";
			}
			if(cs<=12) {
				big = true;
				obj.innerHTML = "点击变大";
			}
			if(big) {
				cs+=2;
			} else {
				cs-=2;
			}
			obj.style.fontSize = cs+"px";
		} else {
			obj.style.fontSize = "14px";
		}
	}
	</script>
</head>
<body>
	<div onclick="clickD(this)" style="cursor: pointer">点击了试一下</div>
	<div onmouseover="mouseD(this)" onmouseout="outD(this)">鼠标移动上来试试</div>
	
	
	<div onclick="bigger(this)" style="cursor: pointer">点击变大</div>
</body>
</html>

 

分享到:
评论

相关推荐

    window对象--event对象详解

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

    event-driven_io-源码.rar

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

    javascript中event详解

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

    javascript Event对象详解

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

    JS event使用方法详解

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

    js-event事件

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

    z-pager.js分页插件.zip

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

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

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

    javascriptEvent对象详解定义.pdf

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

    adonis-event-pusher:最小的adonisjs应用程序

    **Pusher 技术详解** Pusher 是一个实时应用平台,提供WebSocket服务,允许开发者构建具有实时交互功能的应用。它支持多种编程语言,包括JavaScript,可以轻松地与前端和后端集成。通过Pusher,开发者可以向客户端...

    javascript之Event详解[定义].pdf

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

    window.event 对象详解

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

    jquery-timepicker.js

    《jQuery时间选择器插件——jquery-timepicker.js详解》 在网页开发中,用户界面的交互性和用户体验至关重要,其中日期和时间的选择是一个常见的需求。为了简化这一过程,开发者们经常使用时间选择器插件。本文将...

    【JavaScript源代码】详解CocosCreator系统事件是怎么产生及触发的.docx

    本文将深入解析CocosCreator系统事件的产生和触发机制,主要涉及的源文件有`CCGame.js`, `CCInputManager.js`, `CCEventManager.js`, `event-target.js`以及`callbacks-invoker.js`。 首先,我们来看一下事件是如何...

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

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

    videojs-playlist:videoJs播放器集成播放列表原始

    《videojs播放器集成播放列表原始详解》 在IT领域,视频播放器是网页和应用程序中不可或缺的一部分,尤其在多媒体内容日益丰富的今天。video.js是一个知名的开源JavaScript和CSS库,用于构建高性能、跨浏览器的...

    Ext API详解--笔记

    在`EXT核心API详解(二)-Array Date Function Number String.txt`中,Ext Js扩展了JavaScript的基本类型,提供了更强大的数组、日期、函数、数字和字符串处理功能。例如,你可以使用Ext的数组方法进行排序、查找、...

    event.keycode大全(javascript)

    #### 二、常用`event.keyCode`值详解 ##### 1. 特殊功能键 - **`keycode8`: Backspace** 表示退格键。 - **`keycode9`: Tab** 表示制表符键。 - **`keycode12`: Clear** 这个键码在大多数现代键盘上已经不再...

Global site tag (gtag.js) - Google Analytics