关于DOM事件操作
事件的三要素: 事件源、事件、事件驱动程序。
事件源.: 引发后续事件的html标签
document.getElementById(“box”)
document.getElementsByClassName()
document.getElementsByTagName()
事件: js已经定义好了
事件驱动程序: 对样式和html进行操作
事件源.onclick=function(){
事件驱动程序(业务逻辑)
}
按钮排他例子(选中谁,谁的背景变红,其他按钮恢复成白色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btnarr=document.getElementsByTagName('button'); //获取事件源,得到的是数组
for(var i=0;i<btnarr.length;i++){ //for循环遍历数组
btnarr[i].onclick=function(){ //绑定事件 onclick
for(j=0;j<btnarr.length;j++){ //先把所有的按钮的类名都去掉,背景都恢复成默认的白色(排他思想第一步)
btnarr[j].className=' ';
}
this.className='active'; //this指的就是事件源,把事件源的类名编程active,既背景变为红色.
}
}
</script>
</body>
</html>
关于DOM事件操作的更多相关文章
- dom事件操作例题,电子时钟,验证码,随机事件
dom事件操作 当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...
- 前端JavaScript之DOM事件操作
DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...
- JavaScript DOM–事件操作
事件 注册事件 给元素添加事件,为注册事件或者绑定事件 注册事件两种方式 传统方式 监听事件方式 事件监听 addEventListener() 事件监听 (IE9以上) eventTarget.ad ...
- DOM事件操作
DOM事件:对事件做出反应 当事件发生时,可以执行 JavaScript,比如:点击时 onClick="" 例:当用户点击时,会改变 <h1> 元素的内容: < ...
- jQuery学习之旅 Item8 DOM事件操作
1.jquery页面载入事件 1.传统加载事件 <body onload="函数名()"> 页面全部html和css代码加载完成之后再调用指定的onload函数 win ...
- 10-JavaScript之DOM的事件操作
JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...
- 前端 ----关于DOM的事件操作
关于DOM的事件操作 一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for ...
- 10-关于DOM的事件操作
一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象 ...
- python 全栈开发,Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)
昨日内容回顾 1.三种引入方式 1.行内js <div onclick = 'add(3,4)'></div> //声明一个函数 function add(a,b){ } 2. ...
随机推荐
- Unix系统编程()检查进程的存在
检查进程的存在 kill系统调用还有另一重功用.若将参数sig指定为0(即所谓空信号),则无信号发送. 相反,kill仅会去执行错误检查,查看是否可以向目标进程发送信号. 从另一角度来看,这意味着,可 ...
- linux udhcpc 后无法自动设置网卡ip
arm 主板用 udhcpc 获取租赁的空闲的ip后,并没有直接设置在网卡上. 查了一下相关原因,是因为虽然已经获取了ip, 但是并没有通过脚本去设置这个IP. 在 busybox 里面有相关的脚本要 ...
- kernel 4.4.12 移植 HUAWEI MU609 Mini PCIe Module
首先请参考 http://www.cnblogs.com/chenfulin5/p/6951290.html 上一章刚讲了 kernel 3.2.0 移植 MU609 这一章记录新版kernel 的移 ...
- C++中类所占的存储空间
#include <iostream> using namespace std; class A { int m_a; int get() { return m_a; } virtual ...
- linux 驱动cc1101
cc110x.h /* * File: cc110x.h * Author: elinux * * Created on 2015年4月7日, 上午10:32 */ #ifndef CC110X ...
- m4--宏处理器
m4 是 POSIX 标准中的一部分,所有版本的 UNIX 下都可用.虽然这种语言可以单独使用,但大多数人需要 m4 仅仅是因为 GNU autoconf 中的 “configure” 脚本依赖它.宏 ...
- 【转】【iOS测试系列】常用测试小插件的使用
背景介绍 由于iOS系统的限制,在非越狱的自动化测试中无法实现一些常用的功能,比如不同应用之间来回切换.模拟全局的点击事件等等.但是在越狱的环境下,这些限制就不存在了,我们可以利用各种小插件来实现我们 ...
- 【BZOJ】1617: [Usaco2008 Mar]River Crossing渡河问题(dp)
http://www.lydsy.com/JudgeOnline/problem.php?id=1617 裸dp,很好做. 设f[i]表示i头牛到对岸所需最小时间.sum[i]表示运i头牛到对岸的时间 ...
- 【BZOJ】1682: [Usaco2005 Mar]Out of Hay 干草危机(kruskal)
http://www.lydsy.com/JudgeOnline/problem.php?id=1682 最小生成树裸题.. #include <cstdio> #include < ...
- 《网络编程》非堵塞 I/O
概述 在前面文章中,我们介绍了 I/O 的五种模型<I/O 模型>.从那里能够知道,非堵塞式的 I/O 是进程调用 I/O 操作时.若数据未准备就绪.则马上返回一个 EWOULDBLOCK ...