关于js的onchange方法。

JavaScript018

关于js的onchange方法。,第1张

javascript onchange()事件:javascript onchange()事件一般用于用户表单中,例如:当文本框内容发生改变时触发的事件,或者下拉列表框内容发生改变时触发的事件等。

示例分享:onchange()事件,用户输入时,将小写字母转换为大写。

此处用到了javascript中的一个方法 toUpperCase()//将小写母转换为大写字母。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>用户表单验证</title>

<script>

  function changeValue(){

  var userName=document.getElementById("userName") //通过Id获得对象userName

 userName.value=userName.value.toUpperCase()  //将对象的值进行大小写的转换赋值给当前对象的值;

  }

</script>

</head>

<body>

<form name="myform" method="POST" action="register.php" onsubmit="return checkForm()">

userName:<input type="text" name="userName" value="" id="userName" onchange="changeValue()" /><br/>

<input type="submit" name="" value="用户注册" />

</form>

</body>

</html>

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>

this表示调用时间的对象,就是指这个事件的select。

一、js中onchange事件绑定怎么传参?previewImage的参数可以是this,这里指的是<input>这个标签。通过this.files来操作文件,比如this.files.length是文件的个数,this.files[index]指向对应的文件。previewImage的参数可以是也可以是event,指的是change这个事件。至于添加事件处理程序。

1.直接把js代码写在引号里,如

<input type="file" accept="image/*" onchange="alert

(event.type)" multiple/>

2.onchange = 函数名,函数声明在脚本中。如果"previewImage"不加()是不会执行的吧。

<input type="file" accept="image/*" onchange="previewImage

(this)" multiple/><script>function previewImage(obj){

alert(obj.files.length)

}</script>

3.DOM0级事件处理程序

<input type="file" accept="image/*" multiple/><script>document.getElementsByTagName("input")[0].onchange = function(){

alert(event.type)

}</script>

4.DOM2级事件处理程序

<input type="file" accept="image/*"  multiple/><script>document.getElementsByTagName("input")[0].addEventListener("change",function(){

alert(event.type)

})</script>`

或者IE7 8中为`<script>document.getElementsByTagName("input")[0].attachEvent("onchange",function(){

alert(event.type)

})</script>