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

　　事件源.: 引发后续事件的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. 原生js怎么删除一个 div

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 【转】社区O2O的增量与存量，机会在哪？

    在[O2凹凸社]的前一篇<社区O2O创业百态:三教九流>中总结过目前社区O2O行业的创业氛围,那更进一步看为何有这么多创业者想进入社区O2O市场呢?社区O2O的吸引力在哪?机会又在哪? 一 ...

  3. ubuntu 安装dlib 出现dlib.so: undefined symbol: png_set_longjmp_fn

    参考网上的教程安装dlib 安装教程1 sudo apt-get install libboost-python-dev cmake sudo pip install dlib 安装教程2ubuntu ...

  4. 【BZOJ】1699: [Usaco2007 Jan]Balanced Lineup排队（rmq/树状数组）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1699 我是用树状数组做的..rmq的st的话我就不敲了.. #include <cstdio& ...

  5. MySQL单列索引和组合索引的选择效率与explain分析

    一.先阐述下单列索引和组合索引的概念: 单列索引:即一个索引只包含单个列,一个表可以有多个单列索引,但这不是组合索引. 组合索引:即一个索包含多个列. 如果我们的查询where条件只有一个,我们完全可 ...

  6. hdu 3599(最短路+最大流）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3599 思路:首先spfa求一下最短路,然后对于满足最短路上的边(dist[v]==dist[u]+w) ...

  7. $_SERVER，IP，域名常用方法

    PHP $_SERVER详解   $_SERVER['HTTP_ACCEPT_LANGUAGE']//浏览器语言 $_SERVER['REMOTE_ADDR'] //当前用户 IP . $_SERVE ...

  8. Eclipse导入MyEclipseproject（web项目显示为java项目解决的方法）

    在直接Import MyEclipse的项目文件导入到Eclipse之后,须要在项目所放的workspace内改动引入项目文件夹下的.project文件,改动例如以下: 1.在eclipse中新建一个 ...

  9. Python 正则表达式贪婪模式

    贪婪模式也就是我们使用 .* 匹配任意字符时会尽可能长地向后匹配,如果我们想阻止这种贪婪模式,需要加个问号,尽可能少地匹配,如下例子: In []: import re In []: html = ' ...

  10. 第十篇：Linux中权限的再讨论( 上 )

    前言 在Linux系统中,用户分为 个权限位.好了,很多朋友对于Linux权限的了解就仅限于此了.但,Linux目录权限和文件权限一样吗?内核对于权限的检查过程又是怎样的? 如果你不清楚,本文将为你解 ...