DOM事件:对事件做出反应

当事件发生时,可以执行 JavaScript,比如:点击时 onClick=""

例:当用户点击时,会改变 <h1> 元素的内容:

<h1 onclick="this.innerHTML='文本更换!'">点击文本!</h1>

HTML 事件的例子:

onclick=""//点击时
onload=""//页面加载完成时
onchage=""//改变时
onmouseover=""//鼠标移入时
onmouseout=""//鼠标移出时
onmousedown=""//鼠标点下去时
onmouseup=""//鼠标松开时

例题事件:

1、页面打开五个窗口,点击按钮,关闭所有窗口

<button onclick="closeAll()">关闭</button>//html页面,点击按钮关闭所有页面
<script>
var arr = [];
for (var i = 4; i >= 0; i--) {
window.open();//打开新页面
}
function closeAll(){
for (var i =4; i >= 0; i--) {
arr[i].close();//关闭页面
}
}
</script>

2、登陆验证

账号:<input type="text"><br>
密码:<input type="password"><br>
<button onclick="denglu()">登录</button>
<script>
function denglu(){
//获取内容
//找到元素
var input = document.getElementsByTagName("input");//找到input元素,为数组
var uid = input[0];
var pwd = input[1];
//获取元素内容
var uidval = uid.value;
var pwdval = pwd.value;
if(uidval == "" || pwdval == ""){
console.log("账号或密码不能为空!");
return;
}
//验证内容
if(uidval == "admin"){
console.log("登录成功!");
}
}
</script>

3、表格添加行

<button id = "add">添加一行</button>//添加一行按钮
<table id="tab" border="1">
<tr>
<td>
123
</td>
</tr>
</table> <script>
var addbtn = document.getElementById('add');//找到添加按钮
var tab = document.getElementById('tab');//找到表格
addbtn.onclick = function(){
//点击时,运行方法
var tr = document.createElement('tr');//添加标签,新建一行
for (var i = 3; i >= 0; i--) {
var td = document.createElement('td');//新建一个单元格
td.innerHTML = 123;
tr.appendChild(td);//将新建的td添加到tr中
} tab.appendChild(tr);//将新建的tr添加到table中 }
</script>

DOM事件操作的更多相关文章

  1. dom事件操作例题,电子时钟,验证码,随机事件

    dom事件操作 当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...

  2. 前端JavaScript之DOM事件操作

    DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...

  3. JavaScript DOM–事件操作

    事件 注册事件 给元素添加事件,为注册事件或者绑定事件 注册事件两种方式 传统方式 监听事件方式 事件监听 addEventListener() 事件监听 (IE9以上) eventTarget.ad ...

  4. jQuery学习之旅 Item8 DOM事件操作

    1.jquery页面载入事件 1.传统加载事件 <body onload="函数名()"> 页面全部html和css代码加载完成之后再调用指定的onload函数 win ...

  5. 关于DOM事件操作

    事件的三要素: 事件源.事件.事件驱动程序. 事件源.: 引发后续事件的html标签   document.getElementById(“box”) document.getElementsByCl ...

  6. 10-JavaScript之DOM的事件操作

    JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...

  7. 前端 ----关于DOM的事件操作

    关于DOM的事件操作   一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...

  8. 10-关于DOM的事件操作

    一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...

  9. python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)

    昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...

随机推荐

  1. socket 建立网络连接,client && server

    client代码: package socket; import java.io.IOException; import java.net.Socket; /** * 客户端_聊天室 * * @aut ...

  2. JavaScript常用API合集汇总(一)

    今天这篇文章跟大家分享一些JavaScript常用的API代码,有DOM操作.CSS操作.对象(Object对象.Array对象.Number对象.String对象.Math对象.JSON对象和Con ...

  3. css3支持动画吗?css3可以用于网页动画的展现吗

    CSS3 主要可以分为几个模块:边框和背景,渐变,文字特效,字体,2D/3D转换,动画(过渡动画和动画),选择器,盒模型,多列布局,用户界面. css3动画有2类:一种是transition的,另一种 ...

  4. redo log 与 binlog

    redo log 与 binlog   redo log redo log (重做日志)是处于存储引擎层的,是InnoDB引擎特有的 redo log 存储的是物理日志 --- 即,"在某个 ...

  5. 「单调队列优化DP」P2034 选择数字

    「单调队列优化DP」P2034 选择数字 题面描述: 给定一行n个非负整数a[1]..a[n].现在你可以选择其中若干个数,但不能有超过k个连续的数字被选择.你的任务是使得选出的数字的和最大. 输入格 ...

  6. PE文件结构详解(三)

    0x01 前言 上一篇讲到了数据目录表的结构和怎找到到数据目录表(DataDirectory[16]),这篇我们我来讲讲数据目录表后面的另一个结构——区块表. 0x01 区块 区块就是PE载入器将PE ...

  7. day78 通过axios实现数据请求

    目录 一.axios提供http请求的两个常用方法 二.json 1.json数据的语法 2 js中提供json数据转化的方式 三 ajax 1 数据接口 2 ajax在jq和vue的不同使用 3 同 ...

  8. 使用Git GUI工具 上传本地仓库到 gitee码云仓库

    前言: 网上关于git的命令操作与使用很多教程和博客,在使用git工具时我发现有一个 git Gui 可视化工具,我觉得十分的亲切,由于我之前一直是使用svn作为版本控制管理工具,都是可视化操作,使用 ...

  9. JVM 专题四:类加载子系统(二)双亲委派机制

    2. 双亲委派机制 2.1 双亲委派机制工作原理 2.1.1 原理 Java虚拟机对class文件采用的是按需加载的方式,也就是说当需要使用该类时才会将它的class文件加载到内存,生成class对象 ...

  10. 网易实战分享|云信IM SDK接口设计实践

    引语 IM (Instant Messaging)是网络上最流行的通信方式,与日常生活息息相关.IM软件也层出不穷,例如:微信.QQ.易信等.通过多年深耕和技术沉淀,云信产出了一套成熟稳定的IM SD ...