常用的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. [SQL Server]如何快速查找使用了某个字段的所有存储过程

    [SQL Server]如何快速查找使用了某个字段的所有存储过程       当一个系统中使用了很多的表,并且存在大量的存储过程,当数据库中的某个表删除了某个字段,那么相应的存储过程也需要改动,但是我 ...

  2. ios安装cocoaPods

    1. 安装 a. 查看源 i.   gem sources -l b. 删除源 i.   sudo gem sources -r https://rubygems.org/ c. 设置源 i.   s ...

  3. 25个增强iOS应用程序性能的提示和技巧(初级篇)

    25个增强iOS应用程序性能的提示和技巧(初级篇) 标签: ios内存管理性能优化 2013-12-13 10:53 916人阅读 评论(0) 收藏 举报  分类: IPhone开发高级系列(34)  ...

  4. XMPP框架下微信项目总结（2）授权登陆/注销/注册/打印日志

    xmpp授权登陆步骤1 初始化xmppstream 连接服务器 传递属性jid(IP地址 端口号)2 连接成功后 传递“登”陆密码授权 3 授权后,发送在线消息xmpp所有的代理都是子线程中调用的,处 ...

  5. Codeforces Round #370 (Div. 2)（简单逻辑，比较水）

    C. Memory and De-Evolution time limit per test 2 seconds memory limit per test 256 megabytes input s ...

  6. 20145206邹京儒《Java程序设计》第7周学习总结

    20145206 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1.1 时间的度量 ·即使标注为GMT(格林威治时间),实际上谈到的的是UTC(Unix ...

  7. windows重新获取IP

    win+r------->cmd------>ipconfig /release (释放ip) ipconfig /renew  重新获取ip

  8. jQuery - 1.简单的JQuery

    1.简单的JQuery 2.jQuery对象(包装集).Dom对象 3.JQuery提供的函数 1.简单的JQuery $(document).ready(function () { alert(&q ...

  9. sdut 2441 屠夫与狼

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

  10. Oracle Segments可以跨多个data files吗？

    首先,你需要明白的一点是:数据库的物理结构是由数据库的操作系统文件所决定,每一个Oracle数据库是由三种类型的文件组成:数据文件.日志文件和控制文件.数据库的文件为数据库信息提供真正的物理存储.每一 ...