HTML DOM之二：事件
对事件作出反应
当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。
如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：
onclick=JavaScript
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
在本例中，当用户点击时，会改变 <h1> 元素的内容：
1、
例子1：
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <h1 onclick="this.innerHTML='hello!'">请点击这段文本！</h1>
6
7 </body>
8 </html>
例子1改进：用函数
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script>
5 function changetext(id)
6 {
7 id.innerHTML="hello!";
8 }
9 </script>
10 </head>
11 <body>
12
13 <h1 onclick="changetext(this)">请点击这段文本！</h1>
14
15 </body>
16 </html>
2、 button 元素分配 onclick 事件：
例子2：
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
6
7 <button onclick="displayDate()">试一试</button>
8
9 <script>
10 function displayDate()
11 {
12 document.getElementById("demo").innerHTML=Date();
13 }
14 </script>
15
16 <p id="demo"></p>
17
18 </body>
19 </html>
例子2：//
名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。
当按钮被点击时，将执行函数。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 </head>
5 <body>
6
7 <p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
8
9 <button id="myBtn">试一试</button>
10
11 <script>
12 document.getElementById("myBtn").onclick=function(){displayDate()};
13 function displayDate()
14 {
15 document.getElementById("demo").innerHTML=Date();
16 }
17 </script>
18
19 <p id="demo"></p>
20
21 </body>
22 </html>
3、onload 和 onunload 事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。
1 <!DOCTYPE html>
2 <html>
3 <body onload="checkCookies()">
4
5 <script>
6 function checkCookies()
7 {
8 if (navigator.cookieEnabled==true)
9 {
10 alert("Cookies are enabled")
11 }
12 else
13 {
14 alert("Cookies are not enabled")
15 }
16 }
17 </script>
18
19 <p>弹出的提示框会告诉你浏览器是否已启用 cookie。</p>
20 </body>
21 </html>
4、onchange 事件
onchange 事件常用于输入字段的验证。
下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script>
5 function myFunction()
6 {
7 var x=document.getElementById("fname");
8 x.value=x.value.toUpperCase();
9 }
10 </script>
11 </head>
12 <body>
13
14 请输入你的英文名：<input type="text" id="fname" onchange="myFunction()">
15 <p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。</p>
16
17 </body>
18 </html>
5、onmouseover 和 onmouseout 事件
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <div
6 onmouseover="mOver(this)"
7 onmouseout="mOut(this)"
8 style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
9 Mouse Over Me
10 </div>
11
12 <script>
13 function mOver(obj)
14 {
15 obj.innerHTML="谢谢你"
16 }
17
18 function mOut(obj)
19 {
20 obj.innerHTML="把鼠标指针移动到上面"
21 }
22 </script>
23
24 </body>
25 </html>
6、onmousedown、onmouseup 以及 onclick 事件
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <div
6 onmousedown="mDown(this)"
7 onmouseup="mUp(this)"
8 style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
9 点击这里
10 </div>
11
12 <script>
13 function mDown(obj)
14 {
15 obj.style.backgroundColor="#1ec5e5";
16 obj.innerHTML="松开鼠标"
17 }
18
19 function mUp(obj)
20 {
21 obj.style.backgroundColor="#D94A38";
22 obj.innerHTML="谢谢你"
23 }
24 </script>
25
26 </body>
27 </html>
HTML DOM之二：事件的更多相关文章
- 一步一步带你实现virtual dom（二) -- Props和事件
很高兴我们可以继续分享编写虚拟DOM的知识.这次我们要讲解的是产品级的内容,其中包括:设置和DOM一致性.以及事件的处理. 使用Babel 在继续之前,我们需要弥补前一篇文章中没有详细讲解的内容.假设 ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- 前端之JavaScript：JS之DOM对象二
继续JS之DOM对象二 前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement(' ...
- JavaScript的基础语法及DOM元素和事件
一,JavaScript是什么? 1,JavaScript简称:js,是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行.主要用来实现网页的动态效果,用户交互及前后端的数据传输等. 2,J ...
- HTML 事件(二) 事件的注册与注销
本篇主要介绍HTML元素事件的注册.注销的方式. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流.事件委托 4. ...
- DOM中的事件对象
三.事件对象事件对象event1.DOM中的事件对象(1).type:获取事件类型(2).target:事件目标(3).stopPropagation() 阻止事件冒泡(4).preventDefau ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- Chrome插件Visual Event查看Dom元素绑定事件的利器
找这工具找了好久,统一找着了,开发人员不可多得的好东东,收藏做一下分享. 用Chrome插件Visual Event查看Dom绑定的事件 Visual Event简介 Visual Event是一个开 ...
- 在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件
在js文件中通过jquery定位到某个dom时候设置事件时候 相当于直接在dom里面添加事件 当触发事件时候 会把当前的dom传给该方法
- 随笔一个dom节点绑定事件
以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的 ...
随机推荐
- MAUI 框架开发 将 MAUI 嵌入到 WPF 控件里
本文将介绍如何将 MAUI 的底层替换为 WPF 框架层,且将 MAUI 的内容嵌入到 WPF 的一个控件里面,无 UI 框架嵌入的空域问题 本文是 MAUI 框架开发博客,而不是 MAUI 应用开发 ...
- String、StringBuffer、StringBuilder 的区别？
一. 介绍 String.StringBuffer.StringBuilder: 前言: String.StringBuffer.StringBuilder 均在java.lang包下: String ...
- React组件设计之性能优化篇
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品.我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值. 本文作者:空山 前言 由于笔者最近在开发中遇到了一个重复渲染导致子组 ...
- 【游戏开发笔记】编程篇_C#面向对象｛上｝
@ 目录 1.变量和表达式 1.1注释 1.2C#控制台程序基本结构 1.3变量(从存储长度来看) 1.4变量的命名 1.5字面值 1.6运算符 2流程控制 2.1分支 2.2循环 3变量知识拓展 3 ...
- JDBC:使用IDEA配置JDBC
IDEA使用Jar包 操作流程 步骤1:创建lib路径 步骤2:复制jar包 步骤3:必须要做的一步 参考链接 https://blog.csdn.net/upup1006/article/detai ...
- ChatGPT插件开发实战
1.概述 ChatGPT是一款由OpenAI推出的先进对话模型,其强大的自然语言处理能力使得它成为构建智能对话系统和人机交互应用的理想选择.为了进一步拓展ChatGPT的功能和适应不同领域的需求,Op ...
- 谈谈 Kafka 的幂等性 Producer
使用消息队列,我们肯定希望不丢消息,也就是消息队列组件,需要保证消息的可靠交付.消息交付的可靠性保障,有以下三种承诺: 最多一次(at most once):消息可能会丢失,但绝不会被重复发送. 至少 ...
- javascript事件循环机制及面试题详解
javascript是单线程执行的程序,也就是它只有一条主线,所有的程序都是逐行"排队"执行,在这种情况下可能存在一些问题,比如说setTimeout.ajax等待执行的时间较长, ...
- phpexcel图片获取
phpexcel图片获取常见的两种方式: require_once dirname(__FILE__) . '/../Jn/PHPExcel.php'; $filePath = "123.x ...
- Python第三方库pydash功能介绍
Python第三方库pydash功能介绍 本文来自ChatGPT的回答整理 demo部分都验证过ok 介绍 pydash 是一个 Python 库,用于提供类似于 JavaScript 库 lodas ...