常用的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. POJ 3597 Polygon Division (DP)

    题目链接 题意:把一个正多边形分成数个三角形或者四边形,问有多少种方案. 题解: 如果分出的全为三角形的话,那就是正多边形三角剖分问题.它的结果就是Catalan数.现在也可以划分出四边形的话,可以采 ...

  2. UIButton 的点击事件详解

    UIControlEventTouchDown 单点触摸按下事件:用户点触屏幕,或者又有新手指落下的时候. UIControlEventTouchDownRepeat 多点触摸按下事件,点触计数大于1 ...

  3. 查看Linux内核

    方法一: 命令: uname -a 作用: 查看系统内核版本号及系统名称 方法二: 命令: cat /proc/version 作用: 查看目录"/proc"下version的信息 ...

  4. ios安装cocoaPods

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

  5. iOS中UITableView的一些设置

    不可滑动: ? 1 tableView.userInteractionEnabled = NO; 也可以在storyboard中的userInteractionEnable属性设置 显示导向箭头: ? ...

  6. Linear regression with multiple variables(多特征的线型回归)算法实例_梯度下降解法(Gradient DesentMulti)以及正规方程解法(Normal Equation)

    ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, , ...

  7. python基础——类和实例

    python基础——类和实例 面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都 ...

  8. Android Programming: Pushing the Limits -- Chapter 3: Components, Manifests, and Resources

    Android Components Manifest文件 Resource and Assets v\:* {behavior:url(#default#VML);} o\:* {behavior: ...

  9. jQuery – 7.动态创建Dom、删除节点

    动态创建Dom节点     1.使用$(html字符串)来创建Dom节点     2.append方法用来在元素的末尾追加元素     案例:动态生成网站列表     3.prepend,在元素的开始 ...

  10. 苹果开发者账号申请时报错提示错误：Legal Entity Name

    he information you entered did not match your profile in the D&B database. Before submitting you ...