<html>

<head>

	<title>DOM对象</title>

	<style type="text/css">

	  table#tab {

			border:1px solid green;

			border-collapse:collapse;

			width:400px;

	  }

	  #tab td {

			text-align:center;

			border:1px solid green;

			padding:5px;

	  }

	  #menu {

			width:80px;

			font-size:14px;

			border:1px solid green;

			background-color:#ccffff;

			text-align:center;

			display:none;

			position:absolute;

			margin:0px;

	  }

	</style>

	</head>

	<body><!--onmousemove="alert('您的鼠标刚才经过了图片！')" -->

	<div id="menu" >

       <p><a href="">新建</a></p>

       <p><a href="">打开</a></p>

		<p><a href="">保存</a></p>

		<p><a href="">退出</a></p>

	</div>

	<div >事件</div>

	  1.鼠标事件<br/>

		<div  id="opt">

			  <img src="p11.jpg" onmouseover="this.src='p2.jpg'" onmouseout="this.src='p1.jpg'" /><br/><br/>

			  <table id="tab">

			<tr onmouseover="this.bgColor='white'"  onmouseout="this.bgColor='#bfa'">

			<td>aaaa</td>

			<td>bbbb</td>

			<td>cccc</td>

			<td>dddd</td>

			</tr>

			<tr onmouseover="this.bgColor='white'"  onmouseout="this.bgColor='#bfa'">

			<td>aaaa</td>

			<td>bbbb</td>

			<td>cccc</td>

			<td>dddd</td>

			</tr>

			<tr onmouseover="this.bgColor='white'"  onmouseout="this.bgColor='#bfa'">

			<td>aaaa</td>

			<td>bbbb</td>

			<td>cccc</td>

			<td>dddd</td>

			</tr>

			<tr onmouseover="this.bgColor='white'"  onmouseout="this.bgColor='#bfa'">

			<td>aaaa</td>

			<td>bbbb</td>

			<td>cccc</td>

			<td>dddd</td>

			</tr>

			</table>

			<br/>

			<input type="button" value="鼠标按下" onmousedown="showMsg(event)"/><!--事件对象传入-->

			<input type="button" value="双击" ondblclick="this.parentNode.removeChild(this)"/>

			<input type="button" value="单击" onclick="alert('Hello')"/>

			<div  style="width:80px;height:30px; background-color:yellow;" onmouseover="showMenu(event)" onmouseout="$('menu').style.display='none'"

			<a href="http://www.baidu.com">百度</a>

			</div>

		</div>

	  2.键盘事件<br/>

			<input type="text" id="keyvalue"  onkeydown="$('showKey').innerHTML=event.keyCode"/>

			keyCode : <span id="showKey" ></span><!--按钮编码--></br>

	  3.html事件<br/>

			<input type="text" value="张三" onfocus="alert('文本框获取焦点')"/>

			<input type="text" value="李四" onclick="alert('文本框单击')"/>

			<input type="text" value="李四" onchange="alert('文本修改')"/>

			<img src="p11.jpg" onerror="this.src='p22.jpg'" /><br/><br/>

			<input type="text" value="李四" onselect="alert('文本被选中')"/></br>

	  4.事件源<br/>

			<input type="button" value="看看事件对象" onclick="showEvent(event)"/>

			<!--javascript 代码  -->

			<script type="text/javascript">

	       function $(id) {

                return document.getElementById(id);

		   }

		   function showMsg() {

			   //事件对象

			  //var oEvent = window.event;//IE  事件对象

			  var oEvent = arguments[0];//firefox 事件对象

               //alert(oEvent.button);

			   if(oEvent.button == "0") {

                alert("这是左键单击");

			   } else if(oEvent.button == "2"){

					alert("自定义的右键");

				}

		   }

		  function showMenu() {

				var oEvent = arguments[0];

				$("menu").style.display="block";

				//alert( oEvent.clientX);

				//alert( oEvent.clientY);

				$("menu").style.left = oEvent.clientX ;//事件对象坐标

				$("menu").style.top = oEvent.clientY ;

		  }

		  function showEvent(oEvent) {

				var msg = "";

				for( var name in oEvent) {

				   msg += name + " : " + oEvent[name] + "\n";

				}

				alert(msg);

				//事件源  srcElement    target

				// alert(oEvent.srcElement.tagName + " : " + oEvent.srcElement.type); IE

				alert(oEvent.target.tagName + " : " + oEvent.target.type); //firefox

				alert(oEvent.target.value);

		  }

	</script>

		</body>

</html>

rs:

javascript 事件 第23节的更多相关文章

  1. 第一百二十节，JavaScript事件对象

    JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功 ...

  2. 第一百二十一节，JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...

  3. 第一百一十九节，JavaScript事件入门

    JavaScript事件入门 学习要点: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面的用户引起的一系列操作,例如:用户点击.当用户执行某些操 ...

  4. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  5. 重温javascript事件机制

    以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...

  6. JavaScript 事件委托的技术原理

    如今的 JavaScript 技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们 ...

  7. JavaScript事件委托的技术原理

    如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父 ...

  8. JavaScript事件冒泡和事件委托

    JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...

  9. javascript --- 事件托付

    javascript 之 事件托付 长处:1.提高性能(仅仅须要对父级进行操作,子节点相同会拥有其相关属性和方法) 2.对于新加入的事件.也让其拥有父级事件的属性 <!doctype html& ...

随机推荐

  1. [置顶] Effective STL 学习笔记

    看Effective STL 作的一些笔记,希望对各位有帮助. 以下是50条条款及相关解释. 容器 1. 慎重选择容器类型,根据需要选择高效的容器类型. 2. 不要试图编写独立于容器类型的代码. 3. ...

  2. JPA主键策略

    JPA 自带的主键策略有 4 种,在枚举 javax.persistence.GenerationType 中,分别是:TABLE.SEQUENCE.IDENTITY.AUTO. TABLE:通过表产 ...

  3. 一、JSP、Servlet 概要

    //jsp 1.Web.xml可以配置JSP,SERVLET,LISTENER,FILTER,标签库,JAAS,资源引用,默认页面(首页,404...),metadata-complete 2.JSP ...

  4. 【数据结构】非常有用的hash表

        这篇博客的目的是让尚未学会hash表的朋友们对hash表有一个直观的理解,并且能根据本文定义出属于自己的第一个hash表,但算不上研究文,没有深究概念和成功案例.         什么是has ...

  5. cas 3.5.2 登录成功后，如何返回用户更多信息？

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  6. HDU 5112 A Curious Matt 水题

    A Curious Matt Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid ...

  7. android116 轮播 viewPager实现

    布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to ...

  8. innobackupex --slave-info参数的含义和适用场景

    http://blog.itpub.net/28916011/viewspace-1969135/       我有个问题一直没弄明白,就是innobackupex里面的--slave-info这个参 ...

  9. dtrace4linux

    http://www.oschina.net/p/dtrace4linux?fromerr=ZSxqzDcE

  10. 关于jQuery对象与DOM对象

    今天遇到了关于jQuery对象与dom对象的区分问题.具体如下:对于元素<span id="aa" class="aa">hyz</span& ...