常用的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. IOS - Objective-C NSArray和NSMutableArray的详解 使用

    原文地址:http://blog.csdn.net/totogo2010/article/details/7729377 Objective-C的数组比C++,Java的数组强大在于,NSArray保 ...

  2. 基于Spring的可扩展Schema进行开发自定义配置标签支持

    一.背景 最近和朋友一起想开发一个类似alibaba dubbo的功能的工具,其中就用到了基于Spring的可扩展Schema进行开发自定义配置标签支持,通过上网查资料自己写了一个demo.今天在这里 ...

  3. REORG TABLESPACE on z/os

    这个困扰了我两天的问题终于解决了,在运行这个job时:总是提示 A REQUIRED DD CARD OR TEMPLATE IS MISSING NAME=SYSDISC A REQUIRED DD ...

  4. Android下拉刷新效果实现

    本文主要包括以下内容 自定义实现pulltorefreshView 使用google官方SwipeRefreshLayout 下拉刷新大致原理 判断当前是否在最上面而且是向下滑的,如果是的话,则加载数 ...

  5. Eclipse的各种快捷键

     参考他人总结好的 Eclipse快捷键大全(转载) Ctrl+1 快速修复(最经典的快捷键,就不用多说了)     ---->例如:add unimplement methodCtrl+D:  ...

  6. WebService – 2.动态调用WebService

    在本节课程中,将演示如何通过程序动态添加.调用.编译.执行WebService并返回结果. WebService动态调用示意图 WebService相关知识 代码文档对象模型CodeDom的使用 编程 ...

  7. HTML5 – 4.canvas

    1.绘制矩形 2.绘制圆形 3.绘制文字 4.保存文件 什么是 Canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. < ...

  8. **PHP中替换换行符

    PHP中替换换行符 php 不同系统的换行不同系统之间换行的实现是不一样的linux 与unix中用 \nMAC 用 \rwindow 为了体现与linux不同 则是 \r\n所以在不同平台上 实现方 ...

  9. 解析PHP处理换行符的问题 \r\n

    一首先说说 \r 与\n的区别回车”(Carriage Return)和“换行”(Line Feed)这两个概念的来历和区别.在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model ...

  10. PHP中array_merge和array相加的区别分析

    今天处理一个这样的问题:如何获取字符键名相同值不同的两个数组值集合,用array_merge和数组相加都不可行,让我认真比较了下PHP中array_merge和array相加的区别 首先来看看键名是s ...