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的节点,绑定了事件:点击会打出来里头的 ...
随机推荐
- 跟运维学 Linux - 01
跟运维学 Linux - 01 运维的诞生 运维工程师有很多叫法:系统运维.Linux 工程师.系统管理员... 网管可以说是运维工程师最早的雏形.在个人电脑未普及时,大家去网吧玩游戏. 玩家:&qu ...
- SpringBoot整合WebService（实用版）
SpringBoot整合WebService 简介 WebService就是一种跨编程语言和跨操作系统平台的远程调用技术 此处就不赘述WebService相关概念和原理了,可以参考:https://b ...
- 一分钟学一个 Linux 命令 - rm
前言 大家好,我是 god23bin,欢迎回到咱们的<一分钟学一个 Linux 命令>系列,今天我要讲的是一个比较危险的命令,rm 命令,没错,你可以没听过 rm 命令,但是删库跑路你不可 ...
- [nginx]防范空主机头
空主机头防范主要是防止别人恶意将域名解析到服务器IP上. 配置示例 方式一,增加vhost # http的空主机头防范 server { listen 80 default; server_name ...
- Java基础实现加油站圈存机系统
加油站圈存机系统 对于加油卡而言,圈存是将用户账户中已存入的资金划转到所持的加油卡上后方可使用.通俗一点的说法就是您在网点把钱存入主卡中,再分配到下面的副卡,由于副卡都在使用车辆的驾驶员手中,需要 ...
- 9.1 C++ STL 排序、算数与集合
C++ STL(Standard Template Library)是C++标准库中的一个重要组成部分,提供了丰富的模板函数和容器,用于处理各种数据结构和算法.在STL中,排序.算数和集合算法是常用的 ...
- 14.4K Star，一款外观漂亮、运行快速、动画细腻的开源免费UI组件库
之前给大家推荐了很多后台模版,有读者希望推荐一些跟通用的好看组件,毕竟出了后台还有很多其他场景嘛.所以,今天继续给大家推荐一个广受好评的UI组件库:NextUI 主要特性 NextUI的主要目标是简化 ...
- mysql 大表如何ddl 👑
大家好,我是蓝胖子,mysql对大表(千万级数据)的ddl语句,在生产上执行时一定要千万小心,一不小心就有可能造成业务阻塞,数据库io和cpu飙高的情况.今天我们就来看看如何针对大表执行ddl语句. ...
- yum&二进制安装PostgreSQL 12
一.yum安装&配置PostgreSQL 12 目录 一.yum安装&配置PostgreSQL 12 一.前言 1.本文主要内容 2.本文环境信息与适用范围 二.PostgreSQL安 ...
- mac安装nvm
系统:macos catalina版本:10.15.7 一.安装nvm 打开终端执行这个命令 安装的版本是 v0.39.1 curl -o- [https://raw.githubuserconten ...