http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FjQuery%2FEvent_Mouse
JavaScript Tutorial/jQuery/Event Mouse - История изменений
2026-04-04T19:04:48Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Event_Mouse&diff=9501&oldid=prev
Admin: 1 версия
2010-05-26T08:25:05Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:25, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/jQuery/Event_Mouse&diff=9500&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>==30. Cascaded Mouse leave event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseover(function(){<br />
$(this).append("<span style="color:#F00;">mouseover.</span>");<br />
}).mouseleave(function(){<br />
$(this).append("<span style="color:#00F;">mouseleave</span>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>adsf</div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Mouse down event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseup(function(){<br />
$(this).append("<span style="color:#F00;">Mouse up.</span>");<br />
}).mousedown(function(){<br />
$(this).append("<span style="color:#00F;">Mouse down.</span>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>adsf</div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. mousedown(fn) event fires when the pointing device button is pressed over an element.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("p").mouseup(function(){<br />
$(this).append("<span style="color:#F00;">Mouse up.</span>");<br />
}).mousedown(function(){<br />
$(this).append("<span style="color:#00F;">Mouse down.</span>");<br />
});<br />
<br />
});<br />
</script><br />
<style><br />
div.dbl { background:yellow;color:black; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<p>Press mouse and release here.</p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Mouse enter==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseover(function(){<br />
$(this).append("<span style="color:#F00;">mouseover.</span>");<br />
}).mouseenter(function(){<br />
$(this).append("<span style="color:#00F;">mouseenter</span>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>adsf</div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Mouse enter event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("h1").bind("mouseenter mouseleave", function(e){<br />
var str = "( " + e.pageX + ", " + e.pageY + " )";<br />
$("h1").text("Click happened! " + str);<br />
});<br />
<br />
<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<div><h1>header 1</h1></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. mouseenter event triggering==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseenter(function(e){<br />
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";<br />
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";<br />
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);<br />
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);<br />
});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p> <br />
<span>Move the mouse over the div.</span><br />
<span>&nbsp;</span><br />
</p><br />
<div>asdf</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Mouse leave event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("h1").bind("mouseenter mouseleave", function(e){<br />
var str = "( " + e.pageX + ", " + e.pageY + " )";<br />
$("h1").text("Click happened! " + str);<br />
});<br />
<br />
<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<div><h1>header 1</h1></div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. mouseleave event triggering==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseleave(function(e){<br />
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";<br />
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";<br />
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);<br />
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);<br />
});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p> <br />
<span>Move the mouse over the div.</span><br />
<span>&nbsp;</span><br />
</p><br />
<div>asdf</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. mousemove(fn) event fires when mouse is moved==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mousemove(function(e){<br />
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";<br />
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";<br />
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);<br />
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);<br />
});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p> <br />
<span>Move the mouse over the div.</span><br />
<span>&nbsp;</span><br />
</p><br />
<div>asdf</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Mouse out event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseover(function(){<br />
$(this).append("<span style="color:#F00;">mouseover.</span>");<br />
}).mouseout(function(){<br />
$(this).append("<span style="color:#00F;">mouseout</span>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>adsf</div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. mouseout(fn) event fires when mouse is moved away from an element.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseout(function(e){<br />
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";<br />
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";<br />
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);<br />
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);<br />
});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p> <br />
<span>Move the mouse over the div.</span><br />
<span>&nbsp;</span><br />
</p><br />
<div>asdf</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Mouse over action==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("b").mouseover(function () {<br />
$(this).css({"background-color" : "yellow", "font-weight" : "bolder"});<br />
});<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<br />
<b>Hello</b><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Mouse over event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseover(function(){<br />
$(this).append("<span style="color:#F00;">mouseover.</span>");<br />
}).mouseenter(function(){<br />
$(this).append("<span style="color:#00F;">mouseenter</span>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>adsf</div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. mouseover event triggering==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseover(function(e){<br />
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";<br />
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";<br />
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);<br />
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);<br />
});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p> <br />
<span>Move the mouse over the div.</span><br />
<span>&nbsp;</span><br />
</p><br />
<div>asdf</div><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Mouse up event==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mouseup(function(){<br />
$(this).append("<span style="color:#F00;">Mouse up.</span>");<br />
}).mousedown(function(){<br />
$(this).append("<span style="color:#00F;">Mouse down.</span>");<br />
});<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div>adsf</div><br />
<br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Show texts when mouseup and mousedown event triggering.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("p").mouseup(function(){<br />
$(this).append("<span style="color:#F00;">Mouse up.</span>");<br />
}).mousedown(function(){<br />
$(this).append("<span style="color:#00F;">Mouse down.</span>");<br />
});<br />
<br />
});<br />
</script><br />
<style><br />
div.dbl { background:yellow;color:black; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<p>Press mouse and release here.</p><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
==30. Show the mouse coordinates when the mouse is moved over the yellow div. Coordinates are relative to the window which in this case is the iframe.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
$(document).ready(function(){<br />
$("div").mousemove(function(e){<br />
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";<br />
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";<br />
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);<br />
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);<br />
});<br />
<br />
<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<p> <br />
<span>Move the mouse over the div.</span><br />
<span>&nbsp;</span><br />
</p><br />
<div>asdf</div><br />
</body><br />
</html></source></div>