html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)...

本文实例总结了Javascript DOM事件操作。分享给大家供大家参考,具体如下:

使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等。

效果图:

5f641745827656a0ef55e4d233a8c8ad.png

代码:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Javascript 事件

body {background-color:#eeeeee}

div.greenBtn

{

color:white;

background-color:green;

width:200px;

height:20px;

text-align:center;

padding-top:20px;

padding-bottom:20px;

}

button.greenBtn

{

color:white;

background-color:green;

width:200px;

height:50px;

text-align:center;

border:0px;

}

(一)点击时改变HTML元素内容

1.直接改变

请点击文字

2.通过函数改变

请点击文字

function changeText(ele){

ele.innerHTML = "谢谢";

}

function checkCookies(){

if (navigator.cookieEnabled){

// alert("已启用 cookie")

}else{

// alert("未启用 cookie")

}

}

(二)onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie

(三)onchange事件

请输入英文字符:

当您离开输入字段时,会触发将输入文本转换为大写的函数。

function toUpper(ele){

ele.value = ele.value.toUpperCase();

}

(四)onmouseover 和 onmouseout 事件

把鼠标放在上面

function mOver(ele){

ele.innerHTML = "谢谢"

}

function mOut(ele){

ele.innerHTML = "把鼠标放在上面"

}

(五)onmousedown、onmouseup 以及 onclick 事件

鼠标抬起

function mDown(ele){

ele.innerHTML = "鼠标已按下"

ele.style.backgroundColor = "blue"

}

function mUp(ele){

ele.innerHTML = "鼠标抬起"

ele.style.backgroundColor = "green"

}

(六)onfocus 事件

当输入框获取焦点时,改变其背景色

onfocus = "changeBgColor(this,true)"

οnblur="changeBgColor(this,false)">

function changeBgColor(ele,hasFocus){

if(hasFocus){

ele.style.backgroundColor = "yellow"

}else{

ele.style.backgroundColor = "gray"

}

}

PS:关于javascript常用事件及相关说明还可参考本站在线工具:

希望本文所述对大家JavaScript程序设计有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/425839.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2019 wannafly winter camp day5-8代码库

目录 day55H div2 Nested Tree (树形dp)5F div2 Kropki (状压dp)5J div1 Special Judge (计算几何)5I div1 Sorting (线段树)5D div1 Doppelblock (搜索)5C div1 Division (主席树)5E div1 Fast Kronecker Transform (NTTorFFT)day77G div1&2 抢红包机器人 (拓扑序)7A div1…

蓝桥杯-凑算式

凑算式B DEFA --- ------- 10C GHI(如果显示有问题,可以参见【图1.jpg】)这个算式中A~I代表1~9的数字,不同的字母代表不同的数字。比如:68/3952/714 就是一种解法,53/1972/486 是另一种解法。…

天猫系统的流控降级

目录 1交易应用介绍 2系统挑战及应对 3优雅降级思路 4心得总结 交易应用介绍 购物袋 下单 确认订单 系统挑战及应对 挑战 • 高并发 • 低时延 • 容量有限 • 多外部系统协力&下单信息准确 目标 • 不挂掉 – 不因为容量原因导致网站瘫痪 – 自身的容量 – 后…

[剑指offer]面试题第[68-1]题[Leedcode][JAVA][第235题][二叉搜索树的最近公共祖先][递归][BFS]

【问题描述】[第235题][二叉搜索树的最近公共祖先][简单] 给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。百度百科中最近公共祖先的定义为:“对于有根树 T 的两个结点 p、q,最近公共祖先表示为一个结点 x,满足 x 是 p、q 的祖…

html5 应用框架,基于HTML5移动应用框架的研究及应用

摘要:随着3G网络的技术的成熟,以及4G网络的到来,移动设备的普及,移动互联网得到了空前的发展,与此同时,伴随移动互联网产生的移动应用也渗透到了大众生活的各方各面,比如微信,手机银行等等。但是当前移动设备的多样化,不同的厂商,不同的型号,更重要的是不同的平台,即…

天猫服务系统的架构和经验

主要内容 业务介绍 分析设计过程 过程推演 事件/流程架构及使用场景讨论 基础组件介绍 改进点 业务介绍 业务介绍-业务关键点 产品定位 买家:提供标准的、优质的服务体验卖家:整合各环节资源,提供便捷的产品;提升服务质量、降低…

语义化版本控制规范(SemVer)

参考链接 https://semver.org/lang/zh-CN/ 语义化版本 2.0.0 (透过版本号的改变来传达信息.) 摘要 版本格式: 主版本号.次版本号.修订号 版本号递增规则如下: 1.主版本号: 做了不兼容的API修改. 2.次版本号: 做了向下兼容的功能性新增. 3.修订号: 做了向下兼容的问题修正. 规范…

[Leedcode][JAVA][第50题][Pow(x, n)][快速幂][分治][转换类型]

【问题描述】[第50题][Pow(x, n)][中等] 实现 pow(x, n) ,即计算 x 的 n 次幂函数。输入: 2.10000, 3 输出: 9.26100 示例 3:输入: 2.00000, -2 输出: 0.25000 解释: 2-2 1/22 1/4 0.25【解答思路】 1.快速幂 时间复杂度:O(logN) 空间复杂度&#x…

淘宝网商品管理?技术 ?

目录 技术挑战 商品管理 系统的演化过程 技术细节 展望 技术挑战淘宝商品管理 十亿级商品数百万级用户数每天处理TB级数据数据沉淀成本控制业务多变上千条业务规则 发展过程淘宝商品管理 第一阶段:基于搜索 基于搜索的商品管理 〙实现 存储用户设置的规则&…

考计算机网络证书转深户,惊?这个证书能帮你直接入深户,还没有学历要求? 你还在等什么...

原标题:惊?这个证书能帮你直接入深户,还没有学历要求? 你还在等什么只要持有中级职称,40周岁以内申请入户时,有连续半年以上社保,就可以直接入户了,没有学历的要求!而之前…

[Leedcode][JAVA][第155题][最小栈][基本类型包装类]

【问题描述】 【解答思路】 1. 两个栈实现 1.1、辅助栈和数据栈同步 特点:编码简单,不用考虑一些边界情况,就有一点不好:辅助栈可能会存一些“不必要”的元素。 1.2、辅助栈和数据栈不同步 特点:由“辅助栈和数据…

淘宝主站Cgroup资源控制

目录 项目背景:主站的现状 选型的过程 Cgroup/LinuxContainer介绍 定制和开发 存在的问题和对策 项目背景 主站: 跑在xen虚拟机上的Java应用 处理业务逻辑,本地无重要存储,无状态。 一台物理机部署3台虚拟机 双路Xeon&#…

qq邮箱html个签模板,qq邮箱个性签名模板

qq邮箱个性签名模板http://www.qqzf.cn/lizhi68465/1、踮起脚尖,我们就能离幸福更近一点吗?2、不是放不下,只是心里觉得遗憾,曾经付出了那么多的感情,到最后说没就没了。3、见不到你的時候,心里有好多话想和…

ApacheCN 数据科学/人工智能/机器学习知识树 2019.2

【主页】 apachecn.org【Github】ApacheCN暂时下线: 社区暂时下线: cwiki 知识库自媒体平台 微博:ApacheCN知乎:ApacheCNCSDN简书OSChina博客园我们不是 Apache 的官方组织/机构/团体,只是 Apache 技术栈(以及 AI)的爱…

[Leedcode][JAVA][第102题][二叉树的层序遍历][递归][迭代][BFS]

【问题描述】[第102题][二叉树的层序遍历][中等] 给你一个二叉树,请你返回其按 层序遍历 得到的节点值。 (即逐层地,从左到右访问所有节点)。示例: 二叉树:[3,9,20,null,null,15,7],3/ \9 20/ \15 7 返…

java学习(178):终篇?静态代理?动态代理?

总体设计 包com.xzit.aop DynlnvokeProducerProxy 包com.xzit.db db 包com.xzit.entity ClientDepartmentEmployeeGoodsProducer 包com.xzit.interfaces DepartmentDaoImpEmployeeDaoImpIGoodsIObject 包com.xzit.proxy TeatDynProxyTestStaticProxy 咱直接上代码,…

经济学与计算机学收入,考研心得,计算机专业跨考经济学复习经验谈

中国中国人民大学的经济学科以其治学严谨而久负盛名。自2006年至今,经济学科的研究生入学考试初试命题由经济学院命题组统一命题,即全校的经济类(分布于经济学院、商学院、公共管理学院、国际关系学院、劳动人事学院等院系)研究生入学考试的“经济学综合…

PAT-Mars number

1100. Mars Numbers (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue People on Mars count their numbers with base 13: Zero on Earth is called "tret" on Mars. The numbers 1 to 12 on Earch is called…

[bzoj1011] [HNOI2008]遥远的行星

Description 直线上N颗行星&#xff0c;Xi处有行星i,行星J受到行星I的作用力&#xff0c;当且仅当i<AJ.此时J受到作用力的大小为 Fi->jMi*Mj/(j-i) 其中A为很小的常量&#xff0c;故直观上说每颗行星都只受到距离遥远的行星的作用。请计算每颗行星的受力 &#xff0c;只要…

[Leedcode][JAVA][第94/144/145题][前中后序遍历][递归][迭代][二叉树]

【问题描述】[] 前序遍历 先输出当前结点的数据&#xff0c;再依次遍历输出左结点和右结点 中序遍历 先遍历输出左结点&#xff0c;再输出当前结点的数据&#xff0c;再遍历输出右结点 后续遍历 先遍历输出左结点&#xff0c;再遍历输出右结点&#xff0c;最后输出当前结点的数…