DOM的事件处理---学习笔记

最新推荐文章于 2024-05-06 18:26:11 发布
最新推荐文章于 2024-05-06 18:26:11 发布
阅读量529 收藏
点赞数
文章标签： function xhtml javascript server html div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hancky/article/details/1637126
版权

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
    .red
    {
    color:red;
    font-style:italic;
    font-size:32;
    }
    .blue
    {
    color:blue;
    font-size:36;
    }
    .black
    {
    color:black;   
    }
    </style>
   
    <script language="javascript" type="text/javascript">
    function color(e)
    {
        switch(e.srcElement.id)
        {
            case "first":
                document.getElementById("first").className="red";
                break;
            case "second":
                document.getElementById("second").className="blue";
                break;
        }       
    }   
    function clearText(e)
    {
        switch(e.srcElement.id)
        {
        case "first":
            document.getElementById("first").className="black";
            break;
        case "second":
            document.getElementById("second").className="black";
            break;
        }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="first" οnmοuseοver="color(event);" οnmοuseοut="clearText(event);">我本将心照明月</div><br />
    <div id="second" οnmοuseοver="color(event);" οnmοuseοut="clearText(event);;">奈何明月照沟渠</div>
    </form>
</body>
</html> 

HankYue
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React学习笔记之事件处理（二）
12-09
之前已经给大家介绍了React中的条件渲染（传送门），本文将给大家关于React中事件处理的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： React的事件处理和DOM的事件处理是很相似的，只是有一些语法...
Virtual DOM 及 Diff 算法 - 学习笔记
爱玲姐姐的博客
12-15 1099
Virtual DOM 及 Diff 算法 文章出处：拉 勾 大前端 高薪训练营 1. JSX 到底是什么 使用 React 就一定会写 JSX，JSX 到底是什么呢？它是一种 JavaScript 语法的扩展，React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML，但它确实是 JavaScript 。在 React 代码执行之前，Babel 会对将 JSX 编译为 React API. <div className="container"> <h3&gt.
Vue学习笔记-03-事件绑定
欢迎访问我的主页：https://www.bookbook.cc
06-10 8316
文章目录一、Vue如何处理事件？1.1 v-on指令用法1.2 事件函数的调用方式 一、Vue如何处理事件？ 1.1 v-on指令用法 v-on指令用法： <button v-on:click='num++'>点击</button> v-on简写新式: <button @click='num++'>点击1</button> 1.2 事件函数的调用方式 直接绑定函数名称： <button @click='handel'>点击3</butto
JS DOM编程笔记 - 滚动事件（十八）
小帅的编程笔记
11-03 2213
今天我们来学习如何在JavaScript中处理滚动事件，如何优化滚动事件的性能。 滚动事件简介 当我们滚动页面或者在某个元素上滚动时就会触发滚动事件，我们可以通过以下方式触发滚动事件 使用右侧滚动条 使用鼠标滚轮 点击锚点链接 调用JS函数 要监听滚动事件，使用addEventListener()方法，事件名称为scroll，代码如下： targetElement.addEventListener('scroll', (event) => { // 处理滚动事件 }); 或者给目标元素的on
vue学习笔记7----事件处理
qq_59954212的博客
08-19 1021
vue事件处理
爬虫框架Scrapy学习笔记-1
记录我的学习历程
09-14 2486
摘要：本文介绍了网页加载过程、HTTP状态码、反爬措施、数据解析、多任务异步爬虫、数据存储和面向对象编程。读者将了解如何爬取网页数据、处理和存储，以及面向对象编程的基本原理。这些技能对于信息收集、数据分析和网页开发非常有用。
【前端学习】HTML学习笔记-JS进阶
01-08
JS里面的对象 全局对象window 浏览器上是window ...如果是var n=2声明方式的话，n本不应该有任何属性，但是js发明者为了方便开发者应用，从中做了处理，可以出现类似于n.toString n.name = ‘nihao
javascript学习基础笔记之DOM对象操作
01-19
DOM对象给予开发者对HTML的访问权限，并且使开发者能将HTML作为XML文档来处理和查看。DOM对象是与语言无关的API，意味着它的实现并不是与javascript绑定，这在于初学者来说可能会理解错误。DOM是针对XML的基于树的...
javascript学习笔记（三）BOM和DOM详解
01-19
js组成 我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，...BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的
JavaScript 学习笔记（十五）
12-11
事件 事件是DOM（文档对象模型）的一部分。事件流就是事件发生顺序，这是IE和其他浏览器在事件支持上的主要差别。 一、事件流 1、冒泡型事件 IE上的解决方案就是冒泡型事件，它的基本思想是从最特定的目标到最不特定...
常见的 HTML 标准
csdn_ad986ad的博客
04-30 782
HTML（Hypertext Markup Language）有多个版本和标准。
bpmn-js推荐几款常用的插件
飞云先生
04-30 125
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
基于React实现B站评论区
stu_kk的博客
05-02 949
使用React构建了一个仿照B站基本的前端评论系统，实现了动态加载、排序、添加和删除评论的基本功能。通过React的状态管理和事件处理机制，实现了交互式的用户体验。但是在实际应用中，还需考虑与后端接口的交互、错误处理、分页加载、以及更复杂的用户交互逻辑。
表格隔行变色
weixin_54339833的博客
05-02 386
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
vue3引入element-plus完整步骤
最新发布
zzx262625的博客
05-06 152
如果你的项目需要在低版本浏览器上运行，你可能需要使用一些转换工具（如Babel、ESBuild）和polyfill来确保兼容性。在你的Vue项目中配置一个编译器（如Vue CLI、Vite等），然后运行你的项目。你可以尝试在你的组件中使用一些Element Plus的组件来确保它们正常工作。使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。这样，你就可以在你的Vue组件中使用Element Plus的图标了。在你的Vue 3项目的入口文件（通常是。
数据交换和异步请求(JSON&Ajax))
vV_Leon的博客
05-06 568
数据交换异步请求技术
菜鸡学习netty源码（三）—— Reactor 模型
u013127325的博客
05-03 573
我们先进行理解一下Reactor模型，知道什么是Reactor模型，它有什么特别之处。我们先来简单介绍一下这个Reactor模型。Reactor模型的核心思想：就是将所关注的I/O事件进行注册到一个多路复用器上，一旦有I/O事件的发生，将事件进行分发到对应的事件处理器中，执行I/O事件对应的函数。Rector模型有3中模型的实现：单Reactor单线程模型，单Reactor多线程模型，多Reactor多线程模型。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 310
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
macOS asdf 工具版本管理器
Winsom1的博客
04-30 838
如果您只想在当前项目中指定特定的 Node.js 版本，而不影响全局环境，可以使用 asdf local 命令来设置项目的本地 Node.js 版本。3、如果开发者本地没有使用asdf，.tool-versions不影响项目任何内容，可当作提示使用，如果使用了asdf工具，本地没有当前所需node版本会提示安装，如果有会自动将当前文件作用域下的node切换为.tool-versions 指定的版本。要在特定的 Node.js 版本下运行项目，可以使用 asdf 管理器来管理 Node.js 版本。
dom-to-image遇到的坑
09-20
dom-to-image在使用过程中可能会遇到以下问题： 1. 图片加载问题：dom-to-image在将DOM转化为图片时，需要保证所有相关的图片已经加载完成，否则可能出现渲染结果中图片空白的情况。为了解决这个问题，可以使用监听...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值