＜Dom事件＞

已于 2023-09-29 18:05:20 修改
阅读量81 收藏
点赞数
分类专栏： Dom操作 文章标签： dom操作
于 2020-12-15 21:07:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45540964/article/details/111240554
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<h1 id="app" style="font-size: 20px; color: pink">hao</h1>
	<h1 id="app1" style="font-size: 20px; color: pink">hao</h1>
	<input type="text" id="inp" placeholder="123">

	<script type="text/javascript">
		var app=document.getElementById('app');
		var app1=document.getElementById('app1');
		var inp=document.getElementById('inp');
		//监听点击
		//使用匿名函数
		app.onclick=function() {
			app.style.fontSize='50px';
		}
		app.onclick=function() {
			app.style.fontSize='100px';//设置一样的话会覆盖前面的属性
		}
		//监听双击
		function fn() {
			app1.setAttribute('style','font-size: 30px; color: red');
		}
		app1.ondblclick=fn;//不能加括号
		//监听移入
		app.onmouseenter=function() {
			// document.write('onmouseenter');
			app.innerHTML='onmouseenter';
		}
		//监听移出
		app.onmouseleave=function() {
			app.innerHTML='onmouseleave';
		}
		//输入框获取焦点(鼠标点击后)
		inp.onfocus=function() {
			inp.placeholder='please';
		}
		//输入框失去焦点
		inp.onblur=function() {
			inp.style.fontSize='20px';
			inp.style.border='1px solid green';
		}
	</script>
</body>
</html>
好先生·
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue 销毁dom_<vue疑惑>关于使用vm.$destroy()和destroyed钩子的问题
weixin_39841640的博客
01-14 3192
先从v-if出发，观察组件销毁turn-Com复制代码当组件使用v-if切换时正常走完destroyed钩子，DOM也会相应更新移除在destroyed钩子中使用this.tesMessage = 'XXX'试图改变View内容也已经是无效的了当组件调用vm.$destroy()手动销毁时同样走完了destroyed钩子，但页面中的DOM还存在，切换switchCom变量，组件将重新走生命周期，生...
DOM事件探秘篇
01-19
2.DOM0级事件处理程序。 把一个函数赋值给一个事件的处理程序属性，用的比较多的方法，简单，跨浏览器的优势。 3.DOM2级事件处理程序。 （1）用于处理制定和删除事件处理程序的操作。 addEventListener（处理的事件...
【前端面试专栏】＜script＞ 脚本以及 ＜link＞ 标签对 DOM 解析渲染的影响
编码世界
07-06 1万+
当HTML解析器解析HTML，如果遇到`script`标签，普通的`script`标签会暂停对DOM解析渲染，因为该脚本可能会修改DOM。这里有三种情况：普通脚步、defer、async。
【React】Fragment &＜＞＜/＞标签
day day up
07-19 2481
在react中，其实算是标签的一个语法糖表示一个Dom片段它可以在一个内存里面创建一个Dom节点但是并不在Dom模板上渲染，进而提升性能！React中一个常见模式是为一个组件返回多个元素。Fragments可以让你聚合一个子元素列表，并且不在DOM中增加额外节点。key是唯一可以传递给Fragment的属性。在将来，我们可能增加额外的属性支持，比如事件处理。标签可以在语法上需要标签、但目标结构中不需要标签的地方使用。真实`Dom`树不会生成该标签；......
【JavaScript】DOM事件和监听
Dream_Lee的博客
03-28 1458
一、将事件绑定到元素身上的三种方法： 1、HTML事件处理程序（不推荐使用） <a "hide()"> 2、传统的DOM事件处理程序 即在目标DOM事件的基础上绑定事件。如果在声明函数时加上括号，函数会立即调用，去掉括号，函数不会立即调用。 function change(){ //code } var name = document.getElementById("name...
＜JavaScript＞DOM-事件监听
最不正经的计算机专业学生
10-27 2171
1.什么是“事件监听”：用户与网页的交互动作，让HTML元素对动作做出反应 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
ajax动态append新的元素<tr></tr>，添加click事件，如添加点击样式
qq_40159861的博客
04-19 4019
  因为append添加的元素在页面加载完成之后，所以并不能直接通过id绑定$(#todyTr).click()事件，查询资料，说可以通过$(#todyTr).on('click',function(){.....})方法，发现还是无效；原来，现在主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，绑定其父元素，将tr的id放在on的第...
DOM事件机制
浪里行舟的博客
07-28 2245
前言 本文主要介绍DOM事件级别、DOM事件模型、事件流、事件代理和Event对象常见的应用，希望对你们有些帮助和启发！ 本文首发地址为GitHub博客,写文章不易，请多多支持与关注！ 一、DOM事件级别 DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM 0级事件处理，DOM 2级事件处理和DOM 3级事件处理。由于DOM 1级中没...
DOM事件类型、event对象，最详解析。
热门推荐
LeslieCheung_的博客
05-11 1万+
目录事件对象（一）DOM中的事件对象⑴ 示例⑵ 所有事件都有的event对象的属性和方法① currentTarget | this | targer 的区别 事件对象 在触发DOM上的某个事件时，会产生一个事件对象event，这个事件对象包含着所有与事件有关的信息，例如事件是冒泡还是捕获，事件的目标，鼠标坐标，键盘按下的键，等等信息，不要太好用 下面一起来看看event事件对象都有哪些内容吧。 （一）DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论DOM0
DOM事件模型
weixin_40512519的博客
08-20 1936
浏览器事件模型： DOM 0级事件模型 DOM 2级事件模型 DOM 0级事件模型： &lt;input type="button" onclick="doSomething()" /&gt; input.onclick=function(){...} event =event||window.event;兼容性问题 var target=event.target||event.src...
DOM 事件详解
weixin_48376132的博客
07-05 4403
注册事件（绑定事件） 1. 概述 给元素添加事件，称为注册事件 / 绑定事件 注册事件有两种方式：传统方式和方法监听注册方式 2. 传统注册方式 利用 on 开头的事件 DOM 0级事件绑定方式—— 因为 W3C 在确定 DOM 版本时，在之前已经有了事实上存在的一些事件，比如 onclick 这种直接绑定给元素的属性的事件，DOM1 中用的还是之前的事件，所以是 DOM 0级事件，而不是1级事件 <button oncilck = "alert(1)"></button> btn.
DOM 事件流详解
01-19
1.冒泡型事件 浏览器的事件模型分两种：捕获型事件和冒泡型事件。由于ie不支持捕获型事件，所以以下主要以冒泡型事件... <ponclick>’)”> click me</p>  </div>  </body>  <div id=”display”>  </di
深入理解JS DOM事件机制
10-21
JavaScript DOM事件机制是JavaScript与网页交互的核心部分，它定义了如何以及何时响应用户或脚本对HTML元素的交互。深入理解这一机制对于高效地编写网页动态效果和交互至关重要。 1. **事件流** - 事件流描述了...
js DOM的事件常见操作实例详解
10-15
JavaScript DOM事件是JavaScript编程中的核心部分，它使得用户与网页交互成为可能。DOM，即Document Object Model，是一种标准，用于表示HTML或XML文档的结构，并提供了与这些文档交互的方法。在JavaScript中，DOM...
pyzmq-26.0.0b2-cp312-cp312-manylinux_2_28_x86_64.whl
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
C++冒泡排序（基础内容）
06-19
1.循环两个变量：外层（轮数）、内层每轮的次数； 2.总轮数=元素长度-1=最大下标 3.每轮次数=元素长度-1-轮数=最大下标-轮数； 4.轮数（++），次数（++）； 5.两两交换，大的放后面 冒泡排序基础内容，自学可用； 分为三个部分，推到过程，总结，题目样例 很详细，欢迎一起学习交流
pyzmq-25.1.0-cp36-cp36m-win32.whl
最新发布
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
protobuf-3.20.3-cp38-cp38-win_amd64.whl
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
protobuf-3.11.0-py2.7.egg
06-19
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
根据要求，补充代码： <body> <h3>JavaScript DOM事件的简单应用</h3> <hr /> <p id="p1"> 这是一个段落元素。 </p> <!--按钮元素--> <button onclick=" " /在此处添加代码>点击此处更改段落内容</button> <script> function change(){/在此处添加代码 ; } </script> </body>
05-28
以下是完成代码的示例，可实现点击按钮更改段落内容的功能: ```html <body> <h3>JavaScript DOM事件的简单应用</h3> <hr /> <p id="p1"> 这是一个段落元素。 </p> <!--按钮元素--> <button onclick="changeContent()">点击此处更改段落内容</button> <script> function changeContent() { // 获取p元素 var p = document.getElementById("p1"); // 设置新的内容 p.innerHTML = "段落内容已经被更改！"; } </script> </body> ``` 在这个例子中，一个按钮元素被创建，并且当按钮被点击时，`changeContent()`函数会被调用。该函数通过`document.getElementById()`方法获取id为`"p1"`的段落元素，并使用`innerHTML`属性来更改段落的内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值