iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascript简单事件处理和with用法介绍
  • 196
分享到

javascript简单事件处理和with用法介绍

事件处理with用法 2022-11-15 22:11:56 196人浏览 独家记忆
摘要

这一期介绍一些简单的事件处理: 1.鼠标点击 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

这一期介绍一些简单的事件处理:
1.鼠标点击

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "Http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="KeyWords" content="">
<meta name="Description" content="">

<script type="text/javascript">
function click1(obj)
{
alert(obj.innerHTML);
}
</script>
</head>

<body>
<div onclick="click1(this)" style="cursor:pointer">点击我吧</div>
</body>
</html>

this即div的上下文,点击后会弹出<div>之间的内容。
2.鼠标移动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<script type="text/javascript">
function mouse1(obj)
{
obj.style.color = "#f00";
obj.style.fontSize = "18px"
}
function mouse2(obj)
{
obj.style.color = "#000";
obj.style.fontSize = "16px"
}
</script>
</head>

<body>
<div onmouseover="mouse1(this)" onmouseout="mouse2(this)">移动到这儿</div>
</body>
</html>

onmouseover鼠标放到那儿时,会把字体变大,字体成为红色,离开时字体和颜色恢复。
3.with用法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<script type="text/javascript">
with(document)
{
write("niujiabin"+"<br/>");
write("maybe"+"<br/>");
write("Gossip"+"<br/>");
}
</script>
</head>
<body>
</body>
</html>

效果与如下相同

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<script type="text/javascript">
document.write("niujiabin"+"<br/>");
document.write("maybe"+"<br/>");
document.write("gossip"+"<br/>");
</script>
</head>
<body>
</body>
</html>

--结束END--

本文标题: javascript简单事件处理和with用法介绍

本文链接: https://www.lsjlt.com/news/172564.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • javascript简单事件处理和with用法介绍
    这一期介绍一些简单的事件处理: 1.鼠标点击 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio...
    99+
    2022-11-15
    事件处理 with用法
  • JavaScript事件类型的简单介绍
    这篇文章主要讲解了“JavaScript事件类型的简单介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript事件类型的简单介绍”吧!DOM事...
    99+
    2024-04-02
  • C# FileStream简单介绍和使用
    FileStream 是 C# 中用于操作文件的类,它提供了一种以字节为单位读取和写入文件的功能。使用 FileStream,可以实...
    99+
    2023-08-08
    C#
  • javaScript深拷贝和浅拷贝的简单介绍
    目录基本数据类型在数据结构当中引用数据类型浅拷贝-深拷贝浅拷贝浅拷贝小结深拷贝结尾源码地址在了解深拷贝和浅拷贝之前,我们先梳理一下: JavaScript中,分为基本数据类型(原始值...
    99+
    2024-04-02
  • Java - JWT的简单介绍和使用
    Java - JWT的简单介绍和使用 前言一. JWT 基础知识1.1 session 案例测试1.2 JWT 结构1.2.1 Header1.2.2 Payload1.2.3 Signatu...
    99+
    2023-10-27
    java 开发语言 spring boot
  • React事件处理超详细介绍
    目录1. 事件绑定1.1 函数组件1.2 类组件2. 合成事件3. 事件传参的3种不同写法4. this 指向问题1. 事件绑定 React 元素的事件处理和 DOM 元素的很相似,...
    99+
    2024-04-02
  • jQuery中bind的用法简单介绍
    jQuery中的bind()方法用于将一个处理函数绑定到指定的元素上,该处理函数将在特定事件触发时被调用。bind()方法的基本语法如下:```javascript$(selector).bind(event, data, handle...
    99+
    2023-08-09
    jQuery
  • 简单介绍区分applet和application的方法
            Java语言是一种半编译半解释的语言。Java的用户程序分为两类:Java Application和Java Applet。这两类程序在组成结构和执行机制...
    99+
    2023-05-31
    java applet application
  • MySQL中decimal类型用法的简单介绍
    MySQL中支持浮点数的类型有FLOAT、DOUBLE和DECIMAL类型,DECIMAL 类型不同于FLOAT和DOUBLE,DECIMAL 实际是以串存放的。DECIMAL 可能的最大取值范围与DOUB...
    99+
    2024-04-02
  • PyTorch中torch.utils.data.DataLoader简单介绍与使用方法
    目录一、torch.utils.data.DataLoader 简介二、实例参考链接总结一、torch.utils.data.DataLoader 简介 作用:torch.utils...
    99+
    2024-04-02
  • vue @tap事件之$event用法介绍
    目录vue $event用法vue奇怪的event对象event 对象乌龙vue $event用法 html   <span class="cha mui-badge...
    99+
    2024-04-02
  • JavaScript中的4 个相等比较算法的简单介绍
    这篇文章主要讲解了“JavaScript中的4 个相等比较算法的简单介绍”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的4 个相等比较...
    99+
    2024-04-02
  • 单例模式的介绍和用法
    本篇内容主要讲解“单例模式的介绍和用法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“单例模式的介绍和用法”吧!问题1、说说单例模式的特点2、你知道单例模式的具体...
    99+
    2024-04-02
  • TIDB简介及TIDB部署、原理和使用介绍
    TiDB简介及TiDB部署、原理和使用介绍 从MySQL架构到TiDB 数据库分类 ​ 介绍TiDB数据库之前,先引入使用场景。如今的数据库种类繁多,RDBMS(关系型数据库)、NoSQL(Not Only SQL)、NewSQL,在数据库...
    99+
    2023-08-17
    tidb 数据库 mysql 大数据 etl工程师
  • MySQL事件调度器的用法介绍
    本篇内容主要讲解“MySQL事件调度器的用法介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“MySQL事件调度器的用法介绍”吧! 事件调度器有时也可称为临时...
    99+
    2024-04-02
  • 简单介绍Python虚拟环境及使用方法
    目录一、为什么需要虚拟环境?二、virtualenv三、venv四、pipenv一、为什么需要虚拟环境? 这里的环境,指的就是 Python 代码的运行环境。它应该包含以下信息: ...
    99+
    2024-04-02
  • winform关闭窗体FormClosing事件用法介绍
    在窗体中有FormClosing这个事件,这个事件是在窗体关闭时候运行的。如果要取消某个事件的操作,那么就在该事件中写上e.Cancel=true就能取消该事件,也就是不执行该事件。...
    99+
    2024-04-02
  • 详解OpenCV中简单的鼠标事件处理
    目录cv2.setMouseCallback函数语法 回调函数  谈及鼠标事件,就是在触发鼠标按钮后程序所做出相应的反应,但是不影响程序的整个线程。这有...
    99+
    2024-04-02
  • JavaScript的面向对象和它的封装、继承、多态简单介绍
    这篇文章主要介绍“JavaScript的面向对象和它的封装、继承、多态简单介绍”,在日常操作中,相信很多人在JavaScript的面向对象和它的封装、继承、多态简单介绍问题上存在疑惑,小编查阅了各式资料,整...
    99+
    2024-04-02
  • 消息中间件ActiveMQ的简单入门介绍与使用
    目录一、什么是消息中间件二、什么是ActiveMQ三、什么时候需要用ActiveMQ四、如何使用ActiveMQ浅谈MQTT1、什么是MQTT2、如何理解MQTT3、如何使用MQTT...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作