javascript 事件第23节

<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><!--οnmοusemοve="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" οnmοuseοver="this.src='p2.jpg'" οnmοuseοut="this.src='p1.jpg'" /><br/><br/><table id="tab"><tr οnmοuseοver="this.bgColor='white'"  οnmοuseοut="this.bgColor='#bfa'"><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr><tr οnmοuseοver="this.bgColor='white'"  οnmοuseοut="this.bgColor='#bfa'"><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr><tr οnmοuseοver="this.bgColor='white'"  οnmοuseοut="this.bgColor='#bfa'"><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr><tr οnmοuseοver="this.bgColor='white'"  οnmοuseοut="this.bgColor='#bfa'"><td>aaaa</td><td>bbbb</td><td>cccc</td><td>dddd</td></tr></table><br/><input type="button" value="鼠标按下" οnmοusedοwn="showMsg(event)"/><!--事件对象传入--><input type="button" value="双击" οndblclick="this.parentNode.removeChild(this)"/><input type="button" value="单击" οnclick="alert('Hello')"/><div  style="width:80px;height:30px; background-color:yellow;" οnmοuseοver="showMenu(event)" οnmοuseοut="$('menu').style.display='none'"<a href="http://www.baidu.com">百度</a></div></div>2.键盘事件<br/><input type="text" id="keyvalue"  οnkeydοwn="$('showKey').innerHTML=event.keyCode"/>keyCode : <span id="showKey" ></span><!--按钮编码--></br>3.html事件<br/><input type="text" value="张三" οnfοcus="alert('文本框获取焦点')"/><input type="text" value="李四" οnclick="alert('文本框单击')"/><input type="text" value="李四" οnchange="alert('文本修改')"/> <img src="p11.jpg" οnerrοr="this.src='p22.jpg'" /><br/><br/><input type="text" value="李四" οnselect="alert('文本被选中')"/></br>4.事件源<br/><input type="button" value="看看事件对象" οnclick="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); IEalert(oEvent.target.tagName + " : " + oEvent.target.type); //firefoxalert(oEvent.target.value);}</script> </body>
</html>

rs:

转载于:https://www.cnblogs.com/feilongblog/p/4745542.html

javascript 事件第23节相关推荐

javascript --- 事件托付
javascript 之事件托付长处:1.提高性能(仅仅须要对父级进行操作,子节点相同会拥有其相关属性和方法) 2.对于新加入的事件.也让其拥有父级事件的属性 <!doctype html& ...
【探讨】javascript事件机制底层实现原理
前言又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
深入浅出 Javascript 事件
转载自:https://www.cnblogs.com/jingwhale/p/4656869.html 深入浅出 Javascript 事件一.事件流事件冒泡和事件捕获分别由微软和网景公司提出, ...
JavaScript 事件相关
一.如何理解JavaScript事件? 个人理解是浏览器或鼠标或键盘触发某个行为而产生的交互.它可能是某种鼠标行为(点击.按下.划过....),也可能是某种键盘操作,亦或是浏览器发生的行为(文档加载完 ...
JavaScript事件---事件入门
JavaScript事件---事件入门原文:JavaScript事件---事件入门内容提纲: 1.事件介绍 2.内联模型 3.脚本模型 4.事件处理函数 JavaScript事件是由访问Web页面 ...
JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托付建宇 - 2 条评论接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
精通JavaScript事件.详解
事件(上) JavaScript事件列表事件解说一般事件 onclick 鼠标点击时触发此事件 ondblclick 鼠标双击时触发此事件 onmousedown 按下鼠标时触发此事件 onmo ...
[js点滴]JavaScript事件详解
Event对象目录事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信.DOM支持大量的事件,本节介绍DOM的事件编程. EventTarget接口 DOM的事件操作(监听和触发),都 ...
Javascript事件汇总
Javascript事件汇总事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture ...

javascript 事件第23节

javascript 事件第23节相关推荐

最新文章

热门文章

javascript 事件 第23节

javascript 事件 第23节相关推荐

最新文章

热门文章

javascript 事件第23节

javascript 事件第23节相关推荐