<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. [一]JQueryMobile简介

    JQueryMobile 基于JQuery,实现对不同尺寸手机屏幕的支持,提供了许多组件,以及对于手机端的常用事件(touch.tap.taphold) 如何使用 1.引入jquery.js.jque ...

  2. Notepad++的一些常用的快捷键

    ctrl+/  一个一个单词的往后跳Ctrl+H 替换Ctrl+F  查找Ctrl+D 复制当前行到下一行Ctrl+L 删除当前行Ctrl+Shift+F 在文件中找F5 打开run对话框F11 全屏 ...

  3. 自己写一个与startWith类似的判断方法

    package com.hanqi.lianxi; import java.util.Scanner; public class startWith {        //自己顶一个与startWit ...

  4. 教你50招提升ASP.NET性能（十）：减少通过网络发送的数据

    (16)Reduce the data sent across the network 招数16: 减少通过网络发送的数据 Reducing the amount of data sent acros ...

  5. unity3D中协程和线程混合

    这是我google unity3D一个问题偶然发现的在stackflow上非常有趣的帖子: 大意是 要在unity3D上从server下载一个zip,并解压到持久化地址.并将其载入到内存中.以下展示了 ...

  6. SHGetSpecialFolderLocation

    uses shlobj;function GetDesktopFolder():string;var  pItem: PItemIDList;  temp: array[0..MAX_PATH] of ...

  7. Ubuntu Linux下如何配置Android开发环境

    下载和安装Win7系统Android开发环境中讲了怎样在Win7系统中安装Android开发环境,那么怎样在Linux系统中配置Android开发环境呢?本篇文章就将演示如何使用Eclipse.And ...

  8. 一个Solr搜索实例,增删改查+高亮+分页

    今天个人coding的模块测试,所以闲暇之余继续研究solr,然后顺带写了一个实例,随便搞的,solr真心不熟,期待认识热爱搜索的朋友,共同进步. 1.配置schema.xml文件[solr\coll ...

  9. SOAP 及其安全控制--转载

    原文地址:http://my.oschina.net/huangyong/blog/287791 目录[-] 1. 基于用户令牌的身份认证 2. 基于数字签名的身份认证 3. SOAP 消息的加密与解 ...

  10. Response

    Response This improved Response API, able to simplify the Framework's Response management. Practical ...