Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >onmousedown、onmouseup 以及 onclick 事件分享

onmousedown、onmouseup 以及 onclick 事件分享

原创
作者头像
用户7718188
修改于 2021-10-08 07:11:17
修改于 2021-10-08 07:11:17
2.3K00
代码可运行
举报
文章被收录于专栏:高级工程司高级工程司
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>

</body>
</html>
  • onmousedown、onmouseup 以及 onclick 事件 onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

DOM 元素(节点)

  • 添加和删除节点(HTML 元素)。 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>
  • 删除已有的 HTML 元素 如需删除 HTML 元素,您必须首先获得该元素的父元素:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var child=document.getElementById("p1");
child.parentNode.removeChild(child);

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
E006Web学习笔记-JavaScript(四):DOM
将标记语言文档的各个部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD(增删改查)的动态操作;
訾博ZiBo
2025/01/06
760
E006Web学习笔记-JavaScript(四):DOM
【前端】纯前端的一个‘喜欢我吗?’
  只是纯前端的代码。不能记录喜欢的数量。复习了一下js代码(还是很生疏的感觉)。
饶文津
2020/06/02
3350
【Java Web_05】DOM
一、DOM概述 1. 什么是DOM * Document Object Model 文档对象模型 2. 核心DOM ① Document:文档对象 ② Element:元素对象 ③ Attribute:属性对象 ④ Text:文本对象 ⑤ Comment:注释对象 ⑥ Node:节点对象,其他5个的父对象 二、Document 1. 获取Element对象 ① getElementById() 根据id属性值获取元素对象。id属性值一般唯一 ② getElementsByTagName()
用户8250147
2021/02/04
8080
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
上一博文种讲解了JavaScript基础的ECMAScript,包括基本语法和部分对象,本文中继续讲解JavaScript中比较重要的两部分内容BOM、DOM及事件,后文中有对应的实战练习。
Winter_world
2020/09/25
2.3K0
JavaWeb——JavaScript精讲之DOM、BOM对象与案例实战(动态添加删除表格)
选中分享
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #p1{ width: 300px; } #div1{ position: absolute; display: none; } </style> <script
河湾欢儿
2018/09/06
4150
JavaScript HTML DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
zhangjiqun
2024/12/16
1060
JavaScript HTML DOM
DOM 又是个什么鬼?
  DOM(Document Object Model 即:文档对象模型),是一项 W3C 标准,是针对 HTML 和 XML 的一个 API(应用程序接口)。它将 web 页面和 JavaScript 连接起来,允许程序和脚本动态地访问、更新文档的内容、结构和样式。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将 web 页面和脚本或程序语言连接起来。
Demo_Null
2020/09/28
1.3K0
DOM 又是个什么鬼?
(Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能
Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离!
Tz一号
2020/09/10
1.5K0
【一起来烧脑】一步学会JavaScript体系
JavaScript的用法,输出,语句,注解,变量,数据类型,函数,运算符,比较,条件语句,循环,Break,错误,类型转换,表单验证。
达达前端
2019/07/22
1.3K0
JavaScript 学习(1)
参考资料:http://www.w3school.com.cn/js/index.asp
lpe234
2020/07/28
8160
3-DOM
将标记语言文档(HTML,XML…)的各个部分,封装为对象,可以使用这些对象,对标记语言文档进行CRUD动态操作
Ywrby
2022/10/27
1.3K0
HTML DOM - 修改
如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。
陈不成i
2021/07/21
1.2K0
JavaScript事件
本文目录 概述 鼠标事件输入框相关的事件表单提交事件onChange事件键盘事件参考 概述 鼠标事件 <!DOCTYPE html> <html> <head> <meta
efonfighting
2020/02/13
5940
JavaScript事件
JavaScript 学习总结
Java和Javascript的区别就像印度和印度尼西亚的区别,名字中有点相同的东西。
三杯水Plus
2018/11/14
1.5K0
原生JS实现各种运动之拖拽碰撞加重心运动
分享一个用原生JS实现的拖拽碰撞加上重心运动的小Demo,效果如下: 以下是代码实现,欢迎大家复制粘贴及吐槽。 <!DOCTYPE html> <html> <head> <meta ht
越陌度阡
2020/11/26
1.2K0
原生JS实现各种运动之拖拽碰撞加重心运动
JavaScript 添加一个元素标签[通俗易懂]
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/152091.html原文链接:https://javaforall.cn
全栈程序员站长
2022/06/25
5720
JavaScript 添加一个元素标签[通俗易懂]
第85节:Java中的JavaScript
后代选择器: 选择器1 选择器2 子元素选择器:选择器1 > 选择器2 选择器分组: 选择器1,选择器2,选择器3{} 属性选择器:选择器[属性名称='属性值']
达达前端
2019/07/03
2.6K0
第85节:Java中的JavaScript
JAVA保姆式上手教程之免费JAVA 案例day02-js高级
bom: browser object model 浏览器对象模型 js希望和浏览器有一定的交互能力
张哥编程
2024/12/13
940
JavaWeb——JavaScript精讲之事件监听机制与表单校验案例实战
1、事件监听机制概述 事件监听机制,指的是某些组件被执行了某种操作后,触发某些代码的执行。 事件:某些操作,如:单击、双击操作,键盘按下了,鼠标移动了。 事件源:组件,如按钮、文本输入框; 监听器:代码。 注册监听:将事件、事件源、监听器结合在一起,当事件源上发生了某个事件,则触发执行某个监听代码。 常见的事件: 1)点击事件:1、onclick:单击事件                       2、ondbclick:双击事件 2)焦点事件:1、obblur:失去焦点,一般用于表单校验        
Winter_world
2020/09/25
8780
JavaWeb——JavaScript精讲之事件监听机制与表单校验案例实战
js实现带框拖拽
带框拖拽 目录 代码实例 代码解析 下载源码链接 代码实例 <!DOCTYPE html> <html> <head> <title>带框拖拽</title> <style type="text/css"> .div1{ width:400px; height: 400px; background: blue; position: relative; margin: 20px; } .drag1{
星辉
2019/01/15
5K0
相关推荐
E006Web学习笔记-JavaScript(四):DOM
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验