onchange事件是在客户端改变输入控件的值，比如一个textbox，会出发的这个事件。
onchange 在元素值改变时触发。
onchange 属性适用于：<input>、<textarea>以及 <select>元素。
语法：onchange="JavaScript代码"
例如
<script type="text/javascript">function upperCase(){
var x = document.getElementById("fname").value//获取input中的值
document.getElementById("fname").value = x.toUpperCase()//input中的值转换成大写。
}
</script>
<body>
<input type="text" id="fname" onchange="upperCase()" /></p> onchange设置为uppercase时间
</body>
1、使用情景不同
OnChange经常用于select下拉列表选中后的内容发生改变时候触发
OnClick表示的是点击该控件时触发
2、含义不同
OnChange：当控件的内容发生改变时触发该事件
OnClick：点击该控件时触发
3、使用方式不同
onchange和onclick都是js方法
可以在标签元素上使用 <input onchange=""></input> <input onclick=""></input>
也可以 jsobject.onchange=function(){SomeJavaScriptCode}
change和click是jquery方法
$('').change（function（{}））或者 $('').click（function（{}））
扩展资料：
事件一、onclick（下面是静态注册单击事件示例）
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>The event of script</title>
<script type="text/javascript">
function onclickEvent(){
alert("您点击了我 我是一个单击钮触发的事件并且此处由静态加载！！")
}
</script>
</head>
<body>
<input type="button" onclick="onclickEvent()" value="单击事件静态"/>
</body>
</html>
事件二 onchange 动态 和 静态 注册（内容发生改变事件）
<html><head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function onchangeFun(){
alert("静态注册的onchage事件 ")
}
alert("现在页面未加载但是男神下拉框 已经被静态绑定了onchange 改变事件")
// 页面加载完成之后
window.onload = function() {
// 1.通过id属性值获取第二个select标签对象 var selectObj = document.getElementById("select01")
// 2.通过标签对象.事件名 = function(){}
alert("现在页面加载完成 对女神下拉框动态注册onchange事件中")
selectObj.onchange = function() {
alert("这是动态创建的onchange事件 ")
}
}
</script>
</head>
<body>
请选择你心中的男神：
<select onchange="onchangeFun()">
<option selected="selected">刘德华</option>
<option>张学友</option>
<option>张国荣</option>
</select>
<br/>
请选择你心中的女神：
<select id="select01">
<option>李四</option>
<option selected="selected">张三</option>
<option>王五</option>
</select>
</body>
</html>
参考资料来源：百度百科-javascript
//select中的onchange是在下拉框中所选的值发生变化时触发的事件。//可以给onchange事件绑定一个方法，在onchange事件触发时会执行绑定的方法。
//示例：
//首先可以响应select的onchange事件来调用JS编写的事件响应函数，如
<select id="select1" name="select1" onchange="outputSelect()">
<option>...
</select>
//然后编写事件响应函数：
//如果select位于表单（form1）中，select的name为select1，则可使用如下方法：
//获得用户选中的项的索引
var index=window.document.form1.select1.selectedIndex
//根据索引获得该选项的value值
var val=window.document.form1.select1.options[index].value
//如果select并非表单元素，假设select的id为select1,则如下：
var index=window.document.getElementByIdx_xx_x("select1").selectedIndex
var val=window.document.getElementByIdx_xx_x("select1").options[index].value
//如果要输出选择结果，假设HTML中定义了一个<div id="output"></div>，则如下输出：
window.document.getElementByIdx_xx_x("output").innerText=val
//一个示例：
function outputSelect(){
//获取用户选中的项的索引
var index=window.document.getElementByIdx_xx_x("select1").selectedIndex
//根据index获取选中项的value值
var val=window.document.getElementByIdx_xx_x("select1").options[index].value
//根据index获取选中项的Text值，即在下拉列表中显示的选项文本
var vname=window.document.getElementByIdx_xx_x("select1").options[index].text
//输出value :
textdocument.getElementByIdx_xx_x("output").innerText=val " : " vname
欢迎分享，转载请注明来源：聚客百科
微信扫一扫
支付宝扫一扫
评论列表（0条）