<!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. php mysql的储存过程 实现批量更新

    UPDATE newhouse_clicks SET clicks = CASE id WHEN 1 THEN 1000 WHEN 2 THEN 2000 WHEN 3 THEN 3000 END W ...

  2. Python之虚拟环境virtualenv、pipreqs生成项目依赖第三方包

    virtualenv简介 含义: virtual:虚拟,env:environment环境的简写,所以virtualenv就是虚拟环境,顾名思义,就是虚拟出来的一个新环境,比如我们使用的虚拟机.doc ...

  3. [NOI2019]弹跳(KD-Tree/四分树/线段树套平衡树 优化建图+Dijkstra)

    本题可以用的方法很多,除去以下三种我所知道的就还有至少三种. 方法一:类似线段树优化建图,将一个平面等分成四份(若只有一行或一列则等分成两份),然后跑Dijkstra即可.建树是$O(n\log n) ...

  4. Golang ---json解析

    golang官方为我们提供了标准的json解析库–encoding/json,大部分情况下,使用它已经够用了.不过这个解析包有个很大的问题–性能.它不够快,如果我们开发高性能.高并发的网络服务就无法满 ...

  5. git学习笔记 --分支管理策略

    通常,合并分支时,如果可能,Git会用Fast forward模式,但这种模式下,删除分支后,会丢掉分支信息. 如果要强制禁用Fast forward模式,Git就会在merge时生成一个新的comm ...

  6. Idea中类实现Serializable接口 引入 serialVersionUID

    idea实现Serializable接口,然后打出serialVersionUID的办法 setting>editor>Inspection>Java>Serializatio ...

  7. angular复习笔记2-架构总览

    angular架构总览 一个完整的Angular应用主要由6个重要部分构成,分别是:组件.模板.指令.服务.依赖注入和路由.这些组成部分各司其职,而又紧密协作,它们的关系如图所示. 与用户直接交互的是 ...

  8. 【转载】JAVA SpringBoot 项目打成jar包供第三方引用自动配置(Spring发现)解决方案

    JAVA SpringBoot 项目打成jar包供第三方引用自动配置(Spring发现)解决方案 本文为转载,原文地址为:https://www.cnblogs.com/adversary/p/103 ...

  9. vscode+phpstudy构建php调试环境

    由于vs code开源和跨平台,而且插件很多,所以打算以后编写和调试php都用vs code. 配置vs code+phpstudy的php调试环境步骤如下: 1.配置phpstudy,其他选项菜单- ...

  10. 英语DIAMAUND钻石指坚硬不可侵犯的物质

    首先谈谈钻石和金刚石的名称.金刚石是一种天然矿物,是钻石的原石.习惯上人们常将加工过的金刚石称为钻石,而未加工过的称为金刚石(当然,有的金刚石不用加工便可应用).钻石是那些达到宝石级别的金刚石晶体切磨 ...