<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. android 文件上传

    1.java原生上传 拼接上传的字符串 2.HttpClient方式上传 1.导入httpClient jar(core.mime)包 2.设置FileBody.MultiPartEntity.发送请 ...

  2. ios键盘上添加辅助视图

  3. 中国大概能用的NTPserver地址

    133.100.11.8 prefer210.72.145.44203.117.180.36131.107.1.10time.asia.apple.com64.236.96.53130.149.17. ...

  4. ThinkPHP Volist标签

    Volist标签主要用于在模板中循环输出数据集或者多维数组. volist标签(循环输出数据) 闭合 非闭合标签 属性 name(必须):要输出的数据模板变量 id(必须):循环变量 offset(可 ...

  5. [Python]linux自己定义Python脚本命令

    在window下写好的程序配置到Linux上,要实现随意文件夹下的命令调用. 因为初学Linux,这里从文件传输等最主要的方法入手,记录配置的过程中遇到的各种问题. 连接远端server 这里使用pu ...

  6. 几种sap增强的查找方法

    ***方法一**************************************** 通过SE30,运行TCODE后,点Evaluate后,查看运行时间分析评估:命中清单. 找以“exit”开 ...

  7. Struts2 中的数据传输

    1.     如何将参数从界面传递到Action? 你可以把Struts2中的Action看做是Struts1的Action+ActionForm,即只需在Action中定义相关的属性(要有gette ...

  8. mysql 高可用方案漫谈（一） 转阿里云

    https://yq.aliyun.com/articles/2237?spm=5176.blog2238.yqblogcon1.7.e5fyEy#index_section

  9. 3D分析之Functional Surface工具箱（转）

    来自:http://blog.csdn.net/kikitamoon/article/details/8195797 1. Add Surface Information(添加表面信息) 向点.线或面 ...

  10. python中HTMLParser简单理解

    找一个网页,例如https://www.python.org/events/python-events/,用浏览器查看源码并复制,然后尝试解析一下HTML,输出Python官网发布的会议时间.名称和地 ...