JS(event事件)

   常用的event事件:

属性此事件发生在何时...
onabort
图像的加载被中断。
onblur
元素失去焦点。
onchange
域的内容被改变。
onclick
当用户点击某个对象时调用的事件句柄。
ondblclick
当用户双击某个对象时调用的事件句柄。
onerror
在加载文档或图像时发生错误。
onfocus
元素获得焦点。
onkeydown
某个键盘按键被按下。
onkeypress
某个键盘按键被按下并松开。
onkeyup
某个键盘按键被松开。
onload
一张页面或一幅图像完成加载。
onmousedown
鼠标按钮被按下。
onmousemove
鼠标被移动。
onmouseout
鼠标从某元素移开。
onmouseover
鼠标移到某元素之上。
onmouseup
鼠标按键被松开。
onreset
重置按钮被点击。
onresize
窗口或框架被重新调整大小。
onselect
文本被选中。
onsubmit
确认按钮被点击。
onunload
用户退出页面。

几个简单的例子:

onkeyup:实现的效果是当键盘输入完一个字母的时候,产生这个事件(将小写转换为大写),这个事件如果和ajax联合起来用可以实现输入第一个字出来其他相关的单词(模糊查询);

<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>
输入您的姓名: <input type="text" id="fname" onkeyup="upperCase(this.id)" />

</body>
</html>   

与ajax连用:
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText; //从后端模糊查询出来的结果返回
    }
  }
xmlhttp.open("GET","xx_action?q="+str,true);
xmlhttp.send();
}
</script>

First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
<p>结果: <span id="txtHint"></span></p>

 onchange事件:实现的是根据在下拉框选择的不同(即事件的改变)来加载数据库对应不同的数据,利用ajax的GET提交方式实现实时的刷新。
<script>
function showCustomer(str)
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>

<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
<br>
<div id="txtHint">Customer info will be listed here...</div>

其他事件例子可以参考无w3cshool教程。。。
           

努力吧,为了媳妇儿,为了家。。。
原文地址:https://www.cnblogs.com/jlj9520/p/4854496.html