您的位置：首页 > Web前端 > JavaScript

javascript 入门经典--笔记10 -- event事件

2014-11-10 16:29 525 查看

event对象

event 对象有 type 属性，可以获的所触发事件的类型。

鼠标经过段落例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function paragraph_eventHandler(){
/*触发函数之后通过window.event.type 来判断段落中的触发是哪一种*/
 if(window.event.type=="click"){
alert("you clicked it");
}else if(window.event.type=="mouseover"){
alert("you move over it");
}
}

</script>
</head>
<body>
/*触发事件是mouseover，当鼠标经过时，触发函数*/
<p onmouseover="paragraph_eventHandler()">mouve your mouse on me</p>
/*触发事件是 onclick，点击时触发函数*/
<p onclick="paragraph_eventHandler()">click</p>
</body>
</html>

event 的 srcElement 属性，返回接受当前事件的 HTML 元素，但是非IE情况下不适合

一个鼠标经过图片时图片改变的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Using the srcElement Property</title>

<script type="text/javascript">
function image_eventHandler() {
var sourceElement = window.event.srcElement;  //Get the element.
var eventType = window.event.type;  //Get the type of event.

if (eventType == "mouseover") { //The mouse rolled over the image.
sourceElement.src = "o.gif"; //So change the image's src property.
}

if (eventType == "mouseout") { //The mouse moved out.
sourceElement.src = "x.gif"; //So change it back to the original picture.
}
}
</script>
</head>
<body>
<img src="x.gif" onmouseover="image_eventHandler()" onmouseout="image_eventHandler()" />
</body>
</html>

event 在IE 与非IE 中不太相同，没有srcElement，type属性相同，但是引用方法不同。type使用时需要传递event 参数。

非IE中，鼠标经过段落例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*接受 event 参数*/
function paragraph_eventHandler(evt){
/*接受的参数的type类型*/
 if(evt.type=="click"){
alert("you clicked it");
}else if(evt.type=="mouseover"){
alert("you move over it");
}
}

</script>
</head>
<body>
/*对于鼠标事件，触发时需要传递 event 参数*/
<p onmouseover="paragraph_eventHandler(event)">mouve your mouse on me</p>
<p onclick="paragraph_eventHandler(event)">click</p>
</body>
</html>

非IE中，一个鼠标经过图片时图片改变的例子，需要用 event 的 target属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function eventHandler(eve){
/*get the element*/
 var eles = eve.target;
if(eve.type=="mouseover"){
eles.src="x.gif";
}else if(eve.type=="mouseout"){
eles.src="o.gif";
}
}
</script>
</head>
<body>
/*将event参数传入函数中*/
<p><img  src="o.gif"  onmouseover="eventHandler(event)"  onmouseout="eventHandler(event)"> </p>
</body>
</html>

对于两种浏览器都适用，只要添加一个判断语句，修改上面JS 即可

var  eles;

if(eve.srcElement){
eles=eve.srcElement;
} else {
eles = eve.target;

}

鼠标划过链接，下面显示说明

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>descriptive  links</h3>
<p>move the mouse pointer over one of these links to view  a description: </p>
<ul>
<li> <a href="http://www.baidu.com" id="1">Order Form</a> </li>
<li> <a href="http://www.baidu.com" id="2">Email</a> </li>
<li> <a href="http://www.baidu.com" id="3">Complaint  Department</a> </li>
</ul>
<div id="hi"></div>

<script>
document.getElementById("1").onmouseover=hover;
/*鼠标移除之后，将description清空*/
document.getElementById("1").onmouseout=cleardesc;

document.getElementById("2").onmouseover=hover;
document.getElementById("2").onmouseout=cleardesc;

document.getElementById("3").onmouseover=hover;
document.getElementById("3").onmouseout=cleardesc;

function hover(e){
/*对于非IE，传递的e 可以直接使用，但是IE浏览器要用window的event对象，所以下面是一个判断*/
if (!e)
{ var e = window.event;
}
/*判断使用event的target 还是srcElement*/
var whichlink = (e.target) ? e.target : e.srcElement;

/*event触发的ID 不同，所要添加的description的内容也不同*/
if(whichlink.id==1)
des = "this is a emial";
else  if(whichlink.id==2)
des = "this is a document";
else  if(whichlink.id==3)
des = "this is a chart";

document.getElementById("hi").innerHTML= des;
}

function cleardesc (){
document.getElementById("hi").innerHTML="";

}
</script>
<!--<script type="text/javascript" src="linkdesc.js">
</script> -->
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航