javascript中Onchange是什么意思?

生铁2023-02-01  23

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


转载请注明原文地址:https://juke.outofmemory.cn/read/2861858.html

最新回复(0)