JS 当html改变时触发事件

html-css09

JS 当html改变时触发事件,第1张

你的问题描述得不是多清楚,如果你是要达到某个文本改变事触发一个事件,我可以给你举一个例子,

如下:

<html>

<head>

<script type="text/javascript">

function f(x){//这里传进来的参数就是input那个元素

var s=x.value//把我输入到input标签的值保存到对象s里

document.getElementById("mydiv").innerHTML=s//动态改变div里边的内容

}

</script>

</head>

<body>

<input type="text" id="myinput" onkeyup="f(this)" value=""/>

<div id="mydiv"></div>

</body>

</html>

以上的小例子希望能帮到你,另外你说到ajax来异步刷新界面这个问题,由于我不知道你后台用的什么语言,所以暂时帮不了你,如果你用的java语言,我到时可以帮助到你,可以动态的从后台那获取数据,达到局部更新页面的效果。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

  <SCRIPT LANGUAGE="JavaScript">

  <!--

function to_change(){

var obj  = document.getElementsByName('aa')

for(var i=0i<obj.lengthi++){

if(obj[i].checked==true){

if(obj[i].value=='s'){

document.getElementById('content').innerHTML='售售'

}else if(obj[i].value=='z'){

document.getElementById('content').innerHTML='租租'

}

}

}

}

  //-->

  </SCRIPT>

 </HEAD>

 <BODY>

   <INPUT TYPE="radio" NAME="aa" value='s' onclick="to_change()">售

   <INPUT TYPE="radio" NAME="aa" value='z' onclick="to_change()">租

   <hr>

   <span id='content'>

   </span>

 </BODY>

</HTML>

你应该已经读过很多关于HTML5和Javascript的表单标签和数据验证的文章,今天我们来讨论下如何检查表单数据是否被改变了。为什么要检查表单数据被改变?有很多理由需要检测表单数据是否有修改,让我们来看一个很常见的场景,如果用户修改了一个或多个表单域的值,当用户跳离当前页面时,你会给出用户类似“你的修改尚未保存”的提示。你甚至可以给出用户是否保存数据(比如Ajax)的选项。另外的情况,如果表单项没有被修改,这时略去冗余的表单验证和数据发送将会增强用户体验。Javascript02onchange事件为HTML表单元素添加onchange事件处理器是一种可行的方法,这也是用的最多的,但是onchange的实现有一些问题存在:如果用户改变表单域的值,然后再修改回原始值,程序仍将认为表单的修改已经发生。如果表单项的值是通过Javascript动态修改的,onchange事件不会被自动触发。为每一个表单元素增加onchange事件会引起性能问题,特别是较大的表单。如果将表单元素从DOM中增加或移除,你需要相应的注册或移除事件侦听。checkbox和radio的onchange事件在某些浏览器下不能按预期工作(你应该知道是哪个浏览器)。除了onchange,还有更简单有效的方案。比较默认值幸运的是,我们不需要为了复杂的事件处理而写过多的废话,每个表单元素都有与该对象相关联的默认值,即页面加载完后表单控件显示或者默认的数据值,该值可与用户操作后的值进行对比以得出表单域的值是否发生了改变。我们可以从select节点的selectedIndex属性取得当前选中的option的索引值,如果该option对象的defaultSelected属性为false,那么select控件的值一定被修改了,如: web02designer csser.com02developer graphic02artist IT02professional other var02job02=02document.getElementById("job")if02(!job.options[job.selectedIndex].defaultSelected)02alert("#job02has02changed")上面的代码在单选下拉列表并且有一个option拥有selected特性时运行正常,但我们需要留意一些陷阱:如果没有option被赋予selected特性,浏览器会将第一个设为默认选中,但其defaultSelected属性值却为false如果两个或更多option拥有selected特性(这不合逻辑,但是可能的),每个option都会拥有defaultSelected属性且值为true,但是浏览器仅能得到最后一个的默认值。