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

　　事件源.: 引发后续事件的html标签

　　　　　　　  document.getElementById(“box”)

　　　　　　　　document.getElementsByClassName()

　　　　　　　　document.getElementsByTagName()

　　事件:      js已经定义好了

　　　　　　　

　　事件驱动程序: 对样式和html进行操作

　　　　　　　　事件源.onclick=function(){

　　　　　　　　　　事件驱动程序(业务逻辑)

　　　　　　　　}

按钮排他例子(选中谁,谁的背景变红,其他按钮恢复成白色)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         .active{
  8.             background-color: red;　　　　
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <button>按钮1</button>
  14.     <button>按钮2</button>
  15.     <button>按钮3</button>
  16.     <button>按钮4</button>
  17.     <button>按钮5</button>
  18.     <script>
  19.     var btnarr=document.getElementsByTagName('button');　　//获取事件源,得到的是数组
  20.     for(var i=0;i<btnarr.length;i++){　　　　　　　　　　　　　　//for循环遍历数组
  21.             btnarr[i].onclick=function(){　　　　　　　　　　　　//绑定事件  onclick
  22.                 for(j=0;j<btnarr.length;j++){　　　　　　　　　　//先把所有的按钮的类名都去掉,背景都恢复成默认的白色(排他思想第一步)
  23.                     btnarr[j].className=' ';　　
  24.                 }
  25.                 this.className='active';　　　　　　　　　　　　//this指的就是事件源,把事件源的类名编程active,既背景变为红色.
  26.             }
  27.     }
  28.     </script>
  29. </body>
  30. </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. Ubuntu 下添加OpenERP command 快捷启动方式

    编辑home目录下的.bashrc文件 alias xjerp="~/odoo/xj/openerp-server -r openerp --addons-path='~/odoo/xj/o ...

  2. API - 使用数据仓库 - 基础篇

    数据仓库是集成在Spider Studio中的一个重要功能, 利用它可以非常方便的保存采集到的数据, 然后导出或者在其他脚本中再利用. 数据仓库的全部功能都集成在DataManager这个静态类里面, ...

  3. 用Netty开发中间件：高并发性能优化(转)

    用Netty开发中间件:高并发性能优化 最近在写一个后台中间件的原型,主要是做消息的分发和透传.因为要用Java实现,所以网络通信框架的第一选择当然就是Netty了,使用的是Netty 4版本.Net ...

  4. PHP多进程(4) ：内部多进程

    说的都是只兼容unix 服务器的多进程,下面来讲讲在window 和 unix 都兼容的多进程(这里是泛指,下面的curl实际上是通过IO复用实现的). 通过扩展实现多线程的典型例子是CURL,CUR ...

  5. C++ 类的对象管理模型初讲

    //类的对象管理模型初讲 #include<iostream> using namespace std; class PointA{ private: int x;//占据4个字节大小的内 ...

  6. Hadoop源码分析之数据节点的握手，注册，上报数据块和心跳

    转自:http://www.it165.net/admin/html/201402/2382.html 在上一篇文章Hadoop源码分析之DataNode的启动与停止中分析了DataNode节点的启动 ...

  7. 利用flume+kafka+storm+mysql构建大数据实时系统

    架构图

  8. AWS系列-EC2默认限制说明

    Amazon EC2 提供您可以使用的不同资源,例如实例和卷. 在您创建 AWS 账户时,AWS 会针对每个区域中的这些资源设置限制.此页面列出您在 亚太区域 (东京) 中的 EC2 服务限制. 1. ...

  9. CodeForces 558C Amr and Chemistry （位运算，数论，规律，枚举）

    Codeforces 558C 题意:给n个数字,对每一个数字能够进行两种操作:num*2与num/2(向下取整),求:让n个数相等最少须要操作多少次. 分析: 计算每一个数的二进制公共前缀. 枚举法 ...

  10. php如何互换一个数组的首尾元素 中间不变 首尾互换

    群里有人提出一个问题 如何互换一个数组的首尾元素 中间不变 首尾互换 代码如下: <?php $array=array(1,2,3,4,5,6,7,8,9,10); $first=array_s ...