<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. （转）java读取数据库表信息，子段

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...

  2. 关于 JavaScript 数据类型判断

    在 JavaScript 中,有 undefined.null.number.string.boolean 五种基本数据类型,另外,有一种复杂数据类型 object ,类似于 C# 中值类型.引用类型 ...

  3. mysql slow log分析工具的比较

    mysql 中的 slow log 是用来记录执行时间较长(超过 long_query_time 秒)的 sql 的一种日志工具. 启用 slow log 在 my.cnf 中设置 [mysqld] ...

  4. 判断数组(array)中是否包含某个字符(contains)

    $a="a","","b" $a -contains "a" 返回 $true $a -notcontains &quo ...

  5. ThinkPHP3.1快速入门（13）自动完成

    自动完成是ThinkPHP提供用来完成数据自动处理和过滤的方法,使用create方法创建数据对象的时候会自动完成数据处理.因此,在ThinkPHP使用create方法来创建数据对象是更加安全的方式,而 ...

  6. bmp to jpg

    uses Jpeg; function BMPtoJPG(var BMPpic, JPGpic: string): boolean;var  Bitmap: TBitmap;  JpegImg: TJ ...

  7. [Bootstap] 9. Dropdown

    Dropdown Arrow Class In order to create a down arrow like this: , what class should we apply to the ...

  8. WebStorm 6.0下运行pomelo项目

    最近想使用WebStorm来写pomelo,初次使用WebStorm,网上找了老半天根本没有介绍WebStorm如何创建或者打开运行pomelo的教程,网易pomelo官网介绍的使用 WebStorm ...

  9. MySQL使用hugepage

    http://blog.csdn.net/dba_waterbin/article/details/9669929http://www.cnblogs.com/LMySQL/p/4689868.htm ...

  10. com.transfer.www

    package com.transfer.www; import java.io.IOException; import java.io.PrintWriter; import javax.servl ...