JavaScript Tutorial/jQuery/Event
Содержание
- 1 30. Cancel a default action and prevent it from bubbling up
- 2 30. Cancel only the default action by using the preventDefault method
- 3 30. Define custom event
- 4 30. Dynamically tracking the dimensions of an element
- 5 30. Establishing event handlers with the DOM Level 2 Model
- 6 30. Event instance properties
- 7 30. Get click event coordinates
- 8 30. Get event target
- 9 30. Get tag name from event target
- 10 30. Pass some extra data before the event handler:
- 11 30. Prevent default event
- 12 30. Removes a bound live event
- 13 30. Stop only an event from bubbling by using the stopPropagation method.
- 14 30. To cancel only the default action by using the preventDefault method.
- 15 30. Tracking event propagation with bubble and capture handlers
30. Cancel a default action and prevent it from bubbling up
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").live("click", function() { return false; })
});
</script>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
</body>
</html>
30. Cancel only the default action by using the preventDefault method
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("adiv").live("click", function(event){
event.preventDefault();
});
});
</script>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
</body>
</html>
30. Define custom event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
});
$("button").click(function () {
$("div").trigger("myCustomEvent", [ "asdf" ]);
});
});
</script>
<style>
div { width:50px; height:70px; float:left; margin:5px;
background:rgb(255,140,0); cursor:pointer; }
</style>
</head>
<body>
<body>
<div>asdf</div>
<button>bn</button>
</body>
</html>
30. Dynamically tracking the dimensions of an element
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
report();
});
function report() {
$("#display").html(
$("#testSubject").width()+"x"+$("#testSubject").height()
);
}
});
</script>
<style>
div { margin:3px; width:50px; position:absolute;
height:50px; left:10px; top:30px;
background-color:yellow; }
div.red { background-color:red; }
</style>
</head>
<body>
<body>
<div id="testSubject">
</div>
<div id="display"></div>
</body>
</html>
30. Establishing event handlers with the DOM Level 2 Model
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
var element = $("#my")[0];
element.addEventListener("click",function(event) {
say("once!");
},false);
element.addEventListener("click",function(event) {
say("twice!");
},false);
element.addEventListener("click",function(event) {
say("three times!");
},false);
});
function say(text) {
$("#console").append("<div>"+text+"</div>");
}
});
</script>
<style>
div { margin:3px; width:50px; position:absolute;
height:50px; left:10px; top:30px;
background-color:yellow; }
div.red { background-color:red; }
</style>
</head>
<body>
<body>
<img id="my" src="my.jpg"/>
<div id="console"></div>
</body>
</html>
30. Event instance properties
Property Description
altKey true if the Alt key was pressed.
ctrlKey true if the Ctrl key was pressed.
data passed as the second parameter to the bind() command.
keyCode For keyup and keydown events, returns the pressed key.
metaKey true if the Meta key was pressed.
pageX For mouse events, horizontal coordinate.
pageY For mouse events, vertical coordinate.
relatedTarget For some mouse events, cursor left or entered when the event was triggered.
screenX For mouse events, horizontal coordinate.
screenY For mouse events, coordinate from the screen origin.
shiftKey Set to true if the Shift key was pressed.
30. Get click event coordinates
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h1").bind("click", function(e){
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("h1").text("Click happened! " + str);
});
});
</script>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
</body>
</html>
30. Get event target
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#container").click(function (e) {
alert(e.target.tagName);
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<body>
<div id="container">
<div>
<p>This <span>is the <em>way</em> we</span>
write <em>the</em> demo,</p>
</div>
</div>
</body>
</html>
30. Get tag name from event target
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#container").click(function (e) {
alert(e.target.tagName);
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<body>
<div id="container">
<div>
<p>This <span>is the <em>way</em> we</span>
write <em>the</em> demo,</p>
</div>
</div>
</body>
</html>
30. Pass some extra data before the event handler:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
30. Prevent default event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
alert("the link no longer works");
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://wbex.ru/">wbex.ru</a>
</body>
</html>
30. Removes a bound live event
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").die("click", function(event){
event.preventDefault();
});
});
</script>
</head>
<body>
<body>
<div><h1>header 1</h1></div>
</body>
</html>
30. Stop only an event from bubbling by using the stopPropagation method.
$("form").bind("submit", function(event){
event.stopPropagation();
});
30. To cancel only the default action by using the preventDefault method.
$("form").bind("submit", function(event){
event.preventDefault();
});
30. Tracking event propagation with bubble and capture handlers
<html>
<head>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$("*").each(function(){
var current = this;
this.addEventListener("click",function(event) {
say(current.tagName + "#"+ current.id + " target is " + event.target.id);
},true);
this.addEventListener("click",function(event) {
say(current.tagName + "#"+ current.id + " target is " + event.target.id);
},false);
});
});
function say(text) {
$("#console").append("<div>"+text+"</div>");
}
});
</script>
<style>
div { margin:3px; width:50px; position:absolute;
height:50px; left:10px; top:30px;
background-color:yellow; }
div.red { background-color:red; }
</style>
</head>
<body>
<body>
<div id="a">
<div id="b">
<img id="c" src="my.jpg"/>
</div>
</div>
<div id="console"></div>
</body>
</html>