http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_DHTML%2FjQuery%2FEvent
JavaScript DHTML/jQuery/Event - История изменений
2026-04-04T11:33:05Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/Event&diff=3028&oldid=prev
в 10:02, 26 мая 2010
2010-05-26T10:02:45Z
<p></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;">Версия 10:02, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=JavaScript_DHTML/jQuery/Event&diff=3029&oldid=prev
Admin: 1 версия
2010-05-26T07:24:09Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Cancel a default action and prevent it from bubbling up==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
<br />
$(document).ready(function(){<br />
$("div").live("click", function() { return false; })<br />
<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<div><h1>header 1</h1></div><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Cancel only the default action by using the preventDefault method==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
<br />
$(document).ready(function(){<br />
$("adiv").live("click", function(event){<br />
event.preventDefault();<br />
});<br />
<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<div><h1>header 1</h1></div><br />
</body><br />
</html><br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Define custom event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<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 />
<br />
<br />
$("div").bind("myCustomEvent", function(e, myName, myValue){<br />
$(this).text(myName + ", hi there!");<br />
});<br />
$("button").click(function () {<br />
$("div").trigger("myCustomEvent", [ "asdf" ]);<br />
});<br />
<br />
<br />
<br />
});<br />
</script><br />
<style><br />
div { width:50px; height:70px; float:left; margin:5px;<br />
background:rgb(255,140,0); cursor:pointer; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<div>asdf</div><br />
<button>bn</button><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Dynamically tracking the dimensions of an element==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<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 />
$(function(){<br />
report();<br />
});<br />
function report() {<br />
$("#display").html(<br />
$("#testSubject").width()+"x"+$("#testSubject").height()<br />
);<br />
}<br />
});<br />
</script><br />
<style><br />
div { margin:3px; width:50px; position:absolute;<br />
height:50px; left:10px; top:30px; <br />
background-color:yellow; }<br />
div.red { background-color:red; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<div id="testSubject"><br />
</div><br />
<div id="display"></div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Establishing event handlers with the DOM Level 2 Model==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<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 />
$(function(){<br />
var element = $("#my")[0];<br />
element.addEventListener("click",function(event) {<br />
say("once!");<br />
},false);<br />
element.addEventListener("click",function(event) {<br />
say("twice!");<br />
},false);<br />
element.addEventListener("click",function(event) {<br />
say("three times!");<br />
},false);<br />
});<br />
function say(text) {<br />
$("#console").append("<div>"+text+"</div>");<br />
}<br />
});<br />
</script><br />
<style><br />
div { margin:3px; width:50px; position:absolute;<br />
height:50px; left:10px; top:30px; <br />
background-color:yellow; }<br />
div.red { background-color:red; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<img id="my" src="my.jpg"/><br />
<div id="console"></div><br />
</body><br />
</html><br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Event instance properties==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
Property Description<br />
altKey true if the Alt key was pressed.<br />
ctrlKey true if the Ctrl key was pressed.<br />
data passed as the second parameter to the bind() command.<br />
keyCode For keyup and keydown events, returns the pressed key.<br />
metaKey true if the Meta key was pressed.<br />
pageX For mouse events, horizontal coordinate.<br />
pageY For mouse events, vertical coordinate.<br />
relatedTarget For some mouse events, cursor left or entered when the event was triggered.<br />
screenX For mouse events, horizontal coordinate.<br />
screenY For mouse events, coordinate from the screen origin.<br />
shiftKey Set to true if the Shift key was pressed.<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Get click event coordinates==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<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("click", 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><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Get event target==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<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 />
$("#container").click(function (e) {<br />
<br />
alert(e.target.tagName);<br />
e.preventDefault();<br />
return false;<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div id="container"><br />
<div><br />
<p>This <span>is the <em>way</em> we</span> <br />
write <em>the</em> demo,</p><br />
</div><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Get tag name from event target==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<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 />
$("#container").click(function (e) {<br />
<br />
alert(e.target.tagName);<br />
e.preventDefault();<br />
return false;<br />
});<br />
});<br />
</script><br />
</head><br />
<body><br />
<body><br />
<div id="container"><br />
<div><br />
<p>This <span>is the <em>way</em> we</span> <br />
write <em>the</em> demo,</p><br />
</div><br />
</div><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Pass some extra data before the event handler:==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
function handler(event) {<br />
alert(event.data.foo);<br />
}<br />
$("p").bind("click", {foo: "bar"}, handler)<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Prevent default event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<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 />
$("a").click(function(event){<br />
alert("the link no longer works");<br />
event.preventDefault();<br />
});<br />
});<br />
<br />
</script><br />
</head><br />
<body><br />
<a href="http://wbex.ru/">wbex.ru</a><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Removes a bound live event==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script><br />
<script type="text/javascript"><br />
<br />
$(document).ready(function(){<br />
$("div").die("click", function(event){<br />
event.preventDefault();<br />
});<br />
<br />
});<br />
</script><br />
<br />
</head><br />
<body><br />
<body><br />
<div><h1>header 1</h1></div><br />
</body><br />
</html><br />
<br />
<br />
<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Stop only an event from bubbling by using the stopPropagation method.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
$("form").bind("submit", function(event){<br />
event.stopPropagation();<br />
});<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==To cancel only the default action by using the preventDefault method.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
$("form").bind("submit", function(event){<br />
event.preventDefault();<br />
});<br />
<br />
</source><br />
<br />
<br />
<br />
<br />
==Tracking event propagation with bubble and capture handlers==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<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 />
$(function(){<br />
$("*").each(function(){<br />
var current = this;<br />
this.addEventListener("click",function(event) {<br />
say(current.tagName + "#"+ current.id + " target is " + event.target.id);<br />
},true);<br />
this.addEventListener("click",function(event) {<br />
say(current.tagName + "#"+ current.id + " target is " + event.target.id);<br />
},false);<br />
});<br />
});<br />
function say(text) {<br />
$("#console").append("<div>"+text+"</div>");<br />
}<br />
});<br />
</script><br />
<style><br />
div { margin:3px; width:50px; position:absolute;<br />
height:50px; left:10px; top:30px; <br />
background-color:yellow; }<br />
div.red { background-color:red; }<br />
<br />
</style><br />
</head><br />
<body><br />
<body><br />
<div id="a"><br />
<div id="b"><br />
<img id="c" src="my.jpg"/><br />
</div><br />
</div><br />
<div id="console"></div><br />
</body><br />
</html><br />
<br />
</source></div>
Admin