常用的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教程。。。

JS(event事件)的更多相关文章

  1. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  2. JS Event事件流（冒泡机制、捕获机制、事件绑定）

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

  3. js event事件对象概括

    事件是用户或者浏览器自身执行的动作,而响应某个事件的函数就叫做事件处理程序或者叫事件侦听器. 定义事件处理程序可以大致分为以下三种: 一.html事件处理程序 元素支持的每种事件都可以用一个与之对应的 ...

  4. js event事件绑定的方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. js event 事件冒泡和事件捕获详细介绍

    . 参考: http://www.jb51.net/article/42492.htm 图: 假设一个元素div,它有一个下级元素p.<div> <p>元素</p> ...

  6. js event 冒泡和捕获事件详细介绍【转】

    冒泡和捕获 冒泡: 事件从内向外,从下向上执行 (默认行为) 捕获: 事件从外向内,从上向下执行 vue之capture 捕获事件 capture.html <!DOCTYPE html> ...

  7. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  8. The Node.js Event Loop, Timers, and process.nextTick() Node.js事件循环，定时器和process.nextTick()

    个人翻译 原文:https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/ The Node.js Event Loop, Ti ...

  9. Node.js event loop 和 JS 浏览器环境下的事件循环的区别

    Node.js  event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...

随机推荐

  1. 【XLL API 函数】 xlGetInst

    返回正在调用 DLL 的 Excel 实例的实例句柄. 原型 Excel4(xlGetInst, LPXLOPER pxRes, 0); /* returns low part only */ Exc ...

  2. Excel去重

    在excel2007中,数据——>数据工具——>删除重复项也可使用高级筛选:数据——>排序和筛选中的高级——>弹出高级筛选对话框,设置列表区域和条件区域,并勾选“选择不重复记录 ...

  3. 【Mongodb】3.X 配置身份验证

    配置身份验证详解: 开启认证: 启动MongoDB./mongodb --syslog --fork --port 20000  --auth 1.如果不添加参数:auth,表明用默认的root的权限 ...

  4. 备忘zookeeper(单机+伪集群+集群)

    #下载: #单机模式 解压到合适目录. 进入zookeeper目录下的conf子目录, 复制zoo_sample.cfg-->zoo.cfg(如果没有data和logs就新建):tickTime ...

  5. java socket编程开发简单例子 与 nio非阻塞通道

    基本socket编程 1.以下只是简单例子,没有用多线程处理,只能一发一收(由于scan.nextLine()线程会进入等待状态),使用时可以根据具体项目功能进行优化处理 2.以下代码使用了1.8新特 ...

  6. Android 菜单定制使用小结

    GridView 添加 ArrayAdapter<Bean>, 在 gridView 的 Item 点击之后, 1.list.add(bean)/remove(bean) 2.adapte ...

  7. sdut 2441 屠夫与狼

    屠夫和狼 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 题目链接:http://acm.sdut.edu.cn/sdutoj/p ...

  8. PowerDesigner连接Oracle数据库生成数据模型【数据源连接方式】

    1.进入操作系统的管理工具 2.选择ODBC数据源[32位或64位] 3.列表中是当前数据库已有的数据源,右侧点击添加按钮,添加适合自己的数据源 4.在列表中选择索要连接数据库的ODBC驱动[这里我要 ...

  9. android 运行时出现The connection to adb is down, and a severe error has occured.（转）

    点击项目run,报了这样的错,前几天都好好的:   [2013-09-14 15:27:13 - QualityPicture_Client1.3.1.9.7.1] ----------------- ...

  10. PHPCMS V9 栏目列表调用文章点击量及评论数量方法

    很多朋友在用Phpcms做站时,具体需要在列表页.首页调用文章列表调用文章的点击量和评论排行,那么怎么才能做到在Phpcms v9首页.频道页.列表页.推荐位等页面获取文章浏览量和评论统计呢? 原因起 ...