<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>事件类型（onchange）</title>

    <!--

        n.onchange=代码a;元素n的值发生变化时执行代码a；

        扩展知识：

        a.options: 可返回a元素中所有 <option> 的一个数组。

        a.selectIndex: 可设置或返回下拉列表a中被选选项的索引号

     -->

    <script>

        window.onload=function (){  //页面加载完成后执行函数

            var a=document.getElementById("sel");   //获取下拉列表

            a.onchange=function (){     //下拉列表发生变化时执行函数

                //var val=this.value;   //可以用此方法获取下拉列表中每个选项的value

                var val=a.options[a.selectedIndex].value;//也可以用此方法获取下拉列表中每个选项的value

                document.body.style.background=val;//给body设置背景颜色，颜色值为下拉框选项的value

            }

        }

    </script>

</head>

<body>

    <span>请选择页面颜色：</span>

    <select id="sel">

        <option value="white" selected>请选择</option>

        <option value="red">红色</option>

        <option value="green">绿色</option>

        <option value="blue">蓝色</option>

    </select>

</body>

</html>

事件类型（onchange）的更多相关文章

  1. javascript常见的几种事件类型

    第一种事件类型:onchange() <body> <select id="sheng" onchange="fn1();"> < ...

  2. javascript 的 事件类型（事件）

    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都 ...

  3. MySQL binlog中的事件类型

    MySQL binlog记录的所有操作实际上都有对应的事件类型的,譬如STATEMENT格式中的DML操作对应的是QUERY_EVENT类型,ROW格式下的DML操作对应的是ROWS_EVENT类型. ...

  4. 深入理解DOM事件类型系列第二篇——键盘事件

    × 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...

  5. DOM事件类型详解

    一.表单事件: input事件当<input>.<textarea>的值发生变化时触发.此外,打开contenteditable属性的元素,只要值发生变化,也会触发input事 ...

  6. JS中的事件类型和事件属性的基础知识

    周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习,  小姨子再也不用担心我的学习啦 ...

  7. JavaScript事件类型

    JavaScript事件类型 Web浏览器中可能发生的事件有很多类型.这里我将主要将下面几种常用的事件类型: UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设 ...

  8. javascript事件类型之界面拖拽交互

    一.在线DEMO 界面拖拽交互

  9. 在 SharePoint Server 2013 中配置建议和使用率事件类型

    http://technet.microsoft.com/zh-cn/library/jj715889.aspx 适用于: SharePoint Server 2013 利用使用事件,您可以跟踪用户与 ...

随机推荐

  1. C++分治策略实现快速排序

    问题描述: 给定一个未知顺序的n个元素组成的数组,现要利用快速排序算法对这n个元素进行非递减排序. 细节须知: (1)代码实现了利用递归对数组进行快速排序,其中limit为从已有的随机数文件中输入的所 ...

  2. DELPHI6中DSGNINTF.DCU找不到时的解决方法

    https://www.cnblogs.com/gaodu2003/archive/2009/06/04/1495789.html 1.添加 lib\designide.dcp到控件的dpk文件的re ...

  3. 第1课（续集），python turtle库的使用

    原文再续,书接上一回 上回讲到了,python IDLE的草稿本和作业本,并顺便试了试python的输入输出,变量,运算的体验,大家应该能感受到python的简单了吧. 下面我们继续体验python的 ...

  4. Docker 使用入门 Hello World

    结合上一篇的所说的内容:现在安装好了Docker 安装好了就要用嘛,所以,先走一个Hello World docker run ubuntu:15.10 /bin/echo "hello w ...

  5. 如何监视 WPF 中的所有窗口，在所有窗口中订阅事件或者附加 UI

    原文:如何监视 WPF 中的所有窗口,在所有窗口中订阅事件或者附加 UI 由于 WPF 路由事件(主要是隧道和冒泡)的存在,我们很容易能够通过只监听窗口中的某些事件使得整个窗口中所有控件发生的事件都被 ...

  6. P1018 乘积最大(DP)

    题目 P1018 乘积最大 解析 区间DP 设\(f[i][j]\)表示选\(i\)个数,插入\(j\)个乘号时的最大值 设\(num[i][j]\)是\(s[i,j]\)里的数字 转移方程就是\(f ...

  7. Matlab组合模式

    组合模式(Composite),将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性.组合模式的目的是让客户端不再区分操作的是组合对象(Compos ...

  8. 彻底弄懂ES6中的Map和Set

    Map Map对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值.构造函数Map可以接受一个数组作为参数. Map和Object的区别 一个Object 的键只能是字符串或者 Symb ...

  9. hbuilder 热更新

    记录下Hbuilder做热更新的功能. 首先是获取本地的版本与服务器的版本对比.服务器的版本大于本地的版本才进行更新.获取本地版本的方法 plus.runtime.getProperty(plus.r ...

  10. 《我是一只IT小小鸟》读书笔记——第七周

    我是一只IT小小鸟,每一个程序员都是从这样的阶段成长起来的,问题是是否能一开始就找到正确的路径,少走弯路.本书收集了许多年轻程序员从大学开始到就业的成长之路,十分有指导价值也很让人深思. 切忌急功近利 ...