事件的三要素： 事件源、事件、事件驱动程序。

　　事件源.: 引发后续事件的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事件操作的更多相关文章

  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. DOM事件操作

    DOM事件:对事件做出反应 当事件发生时,可以执行 JavaScript,比如:点击时 onClick="" 例:当用户点击时,会改变 <h1> 元素的内容: < ...

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

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

  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. Unix系统编程（）检查进程的存在

    检查进程的存在 kill系统调用还有另一重功用.若将参数sig指定为0(即所谓空信号),则无信号发送. 相反,kill仅会去执行错误检查,查看是否可以向目标进程发送信号. 从另一角度来看,这意味着,可 ...

  2. linux udhcpc 后无法自动设置网卡ip

    arm 主板用 udhcpc 获取租赁的空闲的ip后,并没有直接设置在网卡上. 查了一下相关原因,是因为虽然已经获取了ip, 但是并没有通过脚本去设置这个IP. 在 busybox 里面有相关的脚本要 ...

  3. kernel 4.4.12 移植 HUAWEI MU609 Mini PCIe Module

    首先请参考 http://www.cnblogs.com/chenfulin5/p/6951290.html 上一章刚讲了 kernel 3.2.0 移植 MU609 这一章记录新版kernel 的移 ...

  4. C++中类所占的存储空间

    #include <iostream> using namespace std; class A { int m_a; int get() { return m_a; } virtual ...

  5. linux 驱动cc1101

    cc110x.h /*  * File:   cc110x.h * Author: elinux * * Created on 2015年4月7日, 上午10:32 */ #ifndef CC110X ...

  6. m4--宏处理器

    m4 是 POSIX 标准中的一部分,所有版本的 UNIX 下都可用.虽然这种语言可以单独使用,但大多数人需要 m4 仅仅是因为 GNU autoconf 中的 “configure” 脚本依赖它.宏 ...

  7. 【转】【iOS测试系列】常用测试小插件的使用

    背景介绍 由于iOS系统的限制,在非越狱的自动化测试中无法实现一些常用的功能,比如不同应用之间来回切换.模拟全局的点击事件等等.但是在越狱的环境下,这些限制就不存在了,我们可以利用各种小插件来实现我们 ...

  8. 【BZOJ】1617: [Usaco2008 Mar]River Crossing渡河问题（dp）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1617 裸dp,很好做. 设f[i]表示i头牛到对岸所需最小时间.sum[i]表示运i头牛到对岸的时间 ...

  9. 【BZOJ】1682: [Usaco2005 Mar]Out of Hay 干草危机（kruskal）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1682 最小生成树裸题.. #include <cstdio> #include < ...

  10. 《网络编程》非堵塞 I/O

    概述 在前面文章中,我们介绍了 I/O 的五种模型<I/O 模型>.从那里能够知道,非堵塞式的 I/O 是进程调用 I/O 操作时.若数据未准备就绪.则马上返回一个 EWOULDBLOCK ...