<!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. modbus汇总

    ModBus协议简介及移植到STM32单片机 https://blog.csdn.net/silent123go/article/details/92440091 Modbus测试工具ModbusPo ...

  2. centos7中mysql的rpm包安装

    解决依赖 yum remove mysql-libs 执行命令:yum -y install autoconf 安装依赖 yum -y install autoconf 安装mysql rpm -iv ...

  3. Scala 系列(四)—— 数组 Array

    一.定长数组 在 Scala 中,如果你需要一个长度不变的数组,可以使用 Array.但需要注意以下两点: 在 Scala 中使用 (index) 而不是 [index] 来访问数组中的元素,因为访问 ...

  4. java之基本技术点总结博客

    泛型的理解 聊一聊-JAVA 泛型中的通配符 T,E,K,V,? 类,接口的继承和实现的规则 类与类之间只能继承,并且是单继承,可以多级继承 类与接口之间可以实现,一个类可以实现多个接口 接口和接口之 ...

  5. AspNetCore MVC页面数据提交验证

    2019/05/14,AspNetCore 2.2.0 摘要:AspNetCore MVC使用数据注释配合jquery.validate提交页面进行前端加后端的数据验证 主要用到了jquery.val ...

  6. JS中的if语句内如何加or使多个条件通过

    if(a==1&&b==2){ //do something }//条件是a等于1  并且  b等于2时才能成立,两个条件必须同时满足 if(a==1||b==2){ //do som ...

  7. centos7划分vlan

    1. lsmod|grep 8021q  确认内核是够载入了802.1q模组 2.modprobe -a 8021q   如果没载入使用这个命令载入模组 3.配置vlan需要vconfig命令,由于c ...

  8. Java调用Http/Https接口(4)--HttpClient调用Http/Https接口

    HttpClient是Apache HttpComponents项目下的一个组件,是Commons-HttpClient的升级版,两者api调用写法也很类似.文中所使用到的软件版本:Java 1.8. ...

  9. 2019 同程旅游java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.同程等公司offer,岗位是Java后端开发,因为发展原因最终选择去了同程,入职一年时间了,之前面试了很多家公 ...

  10. 【面试突击】-Redis常见面试题(二)

    1.什么是Redis?简述它的优缺点? Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到 ...