javascript中Onchange是什么意思?

javascript中Onchange是什么意思?,第1张

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5825312.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-02-03
下一篇 2023-02-03

发表评论

登录后才能评论

评论列表(0条)

保存