返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/172564.html(转载时请注明来源链接)

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

猜你喜欢
  • 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
  • React事件处理超详细介绍
    目录1. 事件绑定1.1 函数组件1.2 类组件2. 合成事件3. 事件传参的3种不同写法4. this 指向问题1. 事件绑定 React 元素的事件处理和 DOM 元素的很相似,...
    99+
    2024-04-02
  • Android Retrofit的简单介绍和使用
    Retrofit与okhttp共同出自于Square公司,retrofit就是对okhttp做了一层封装。把网络请求都交给给了Okhttp,我们只需要通过简单的配置就能使用re...
    99+
    2022-06-06
    retrofit Android
  • 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
  • Android popupwindow简单使用方法介绍
    先看下效果 1.首页 package com.yskj.jh.demopopupwindow; import android.content.Context; impo...
    99+
    2022-06-06
    方法 popupwindow Android
  • jQuery中bind的用法简单介绍
    jQuery中的bind()方法用于将一个处理函数绑定到指定的元素上,该处理函数将在特定事件触发时被调用。bind()方法的基本语法如下:```javascript$(selector).bind(event, data, handle...
    99+
    2023-08-09
    jQuery
  • Android的Touch事件处理机制介绍
    Android的Touch事件处理机制比较复杂,特别是在考虑了多点触摸以及事件拦截之后。 Android的Touch事件处理分3个层面:Activity层,ViewGroup层...
    99+
    2022-06-06
    touch Android
  • 简单介绍区分applet和application的方法
            Java语言是一种半编译半解释的语言。Java的用户程序分为两类:Java Application和Java Applet。这两类程序在组成结构和执行机制...
    99+
    2023-05-31
    java applet application
  • Android中dumpsys命令用法简单介绍
    在Android手机上, 通过使用adb shell命令可以进入android系统的shell, 该shell除支持一些常用的标准命令之外,还支持一些和android系统相关的...
    99+
    2022-06-06
    Android
  • 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
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作