常用的event事件：

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

几个简单的例子：

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

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. function upperCase(x)
  5. {
  6. var y=document.getElementById(x).value
  7. document.getElementById(x).value=y.toUpperCase()
  8. }
  9. </script>
  10. </head>
  11. <body>
  12. 输入您的姓名： <input type="text" id="fname" onkeyup="upperCase(this.id)" />
  13.  
  14. </body>
  15. </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. 【python】利用pathlib遍历目录Path().rglob

    来源:https://docs.python.org/3/library/pathlib.html 可以用pathlib模块中的Path().rglob来递归遍历文件 from pathlib imp ...

  2. 20145213《Java程序设计》实验三敏捷开发与XP实践

    20145213<Java程序设计>实验三敏捷开发与XP实践 实验要求 1.XP基础 2.XP核心实践 3.相关工具 实验内容 1.敏捷开发与XP 软件工程是把系统的.有序的.可量化的方法 ...

  3. UISrollView

    1.  contentOffset 默认CGPointZero,用来设置scrollView的滚动偏移量. // 设置scrollView的滚动偏移量 scrollView.contentOffset ...

  4. asp.net Excel数据导入到数据库中

    protected void Btn_Import_Click(object sender, EventArgs e) { bool Result_Import = false; bool Resul ...

  5. [Java 基础] 并发队列ConcurrentLinkedQueue和阻塞队列LinkedBlockingQueue用法

    reference : http://www.cnblogs.com/linjiqin/archive/2013/05/30/3108188.html 在Java多线程应用中,队列的使用率很高,多数生 ...

  6. July 1st, Week 27th Friday, 2016

    It does not do to dwell on dreams, and forget to live. 不要生活在梦里,不要沉醉于空想而疏忽了生活. Stand straightly, and ...

  7. CUDA中并行规约（Parallel Reduction）的优化

    转自: http://hackecho.com/2013/04/cuda-parallel-reduction/ Parallel Reduction是NVIDIA-CUDA自带的例子,也几乎是所有C ...

  8. Thinkphp3.2中的模板继承

    1:模板继承:   是3.1.2版本添加的一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比 类的继承一样,模板也可以定义一个基础模板( ...

  9. uploadify文件批量上传

    uploadify能够时间文件的批量上传,JS文件包下载地址,使用说明可以参考官网文档(http://www.uploadify.com/documentation/) 使用方法如下代码: $(&qu ...

  10. HTTP/1.1 中 If-Modified-Since 和 If-Unmodified-Since 区别简记

    接触HTTP/1.1的时日还不多, 有时候看着这两个参数老是有点混淆, 今天终于理清了, 现记录下.    初学网络, 若有理解不对, 还请拍砖. If-Modified-Since: 从字面上看, ...