<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. UI进阶 数据库 SQLite

    1.数据库管理系统 SQL:SQL是Structured Query Language(结构化查询语言)的缩写. SQL是专为数据库而建立的操作命令集,是一种功能齐全的数据库语言. 常见的数据库管理系 ...

  2. Android短彩信源码解析-短信发送流程（三）

    3.短信pdu的压缩与封装 相关文章: ------------------------------------------------------------- 1.短信发送上层逻辑 2.短信发送f ...

  3. 使用Windows的分析等待链（analyze wait chain）来诊断没用响应的应用

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用Windows的分析等待链(analyze wait chain)来诊断没用响应的应用.

  4. iOS Instruments内存检测使用

    Instruments 可以帮我们了解到应用程序使用内存的几个方面: 全局内存使用情况(Overall Memory Use): 从全局的角度监测应用程序的内存使用情况,捕捉非预期的或大幅度的内存增长 ...

  5. cocos2d-x 判断系统语言

    转自:http://blog.csdn.net/tangaowen/article/details/8878193 //default language is local language ccLan ...

  6. 【IOS界面布局】横竖屏切换和控件自适应（推荐）

    [IOS界面布局]横竖屏切换和控件自适应(推荐) 分类: [MAC/IOS下开发]2013-11-06 15:14 8798人阅读 评论(0) 收藏 举报 横竖屏切换 自适应 第一种:通过人为的办法改 ...

  7. HDU 5476 Explore Track of Point 数学平几

    Explore Track of Point Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem ...

  8. 【Android开发】完美解决Android完全退出程序

    背景:假说有两个Activity, Activity1和Activity2, 1跳转到2,如果要在2退出程序,一般网上比较常见的说法是用 System.exit(0) 或是 android.os.Pr ...

  9. pomelo组件..

    1.pomelo会加载lib/components目录下的组件.并设置为属性..和存储在Pomelo.components中..注意这里其实存储的是对象的构造函数.. function load() ...

  10. Mysql一些重要配置参数的学习与整理系列

    http://my.oschina.net/realfighter/blog?catalog=585558&temp=1467909771588