jQuery event model test
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="/lib/jquery/jquery-1.2.6.js"></script>
<style type="text/css" media="screen">
div, p {
margin: 2px;
border: #eee 1px solid;
min-height: 20px;
}
table, td {
width: 100%;
border: #ddd 1px solid;
}
.block {
position: relative;
width: 200px;
background-color: #828;
}
.data {
background-color: #333;
}
</style>
</head>
<body>
<p>Click or double click here.</p>
<span></span>
<div class="data">click here and see console log</div>
<p id="myCustom">Has an attached custom event.</p>
<button id="customButton">Trigger custom event</button>
<span style="display:none;" id="eventSpan"></span>
<div>
<p>
Binds a handler to a particular event (like click) for each matched element. Can also bind custom events.<br>
The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false. Note that this will prevent handlers on parent elements from running but not other jQuery handlers on the same element.
</p>
<p>
In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second parameter (and the handler function as the third), see second example.
</p>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block">div.block has animation</div>
</div>
<div class="oneClick"></div>
<div class="oneClick"></div>
<div class="oneClick"></div>
<div class="oneClick"></div>
<div class="oneClick"></div>
<div class="oneClick"></div>
<div class="oneClick"></div>
<div class="oneClick"></div>
<p id="p4click">Click a green square...</p>
<button id="button1">Button #1</button>
<button id="button2">Button #2</button>
<div><span id="spanFirst">0</span> button #1 clicks.</div>
<div><span id="spanLast">0</span> button #2 clicks.</div>
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="To Be Focused" class="handler"/>
<script type="text/javascript" charset="utf-8">
$("p").bind("click", function(e){
console.log(e);
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.tagName);
});
function handler(event) {
console.log(event.data.foo);
}
// You can pass some extra data before the event handler:
$("div.data").bind("click", {foo: "bar"}, handler)
// To cancel a default action and prevent it from bubbling up, return false:
$("form").bind("submit", function() {return false; })
// Can bind custom events too.
$("p").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("#eventSpan").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("#customButton").click(function () {
$("#myCustom").trigger("myCustomEvent", [ "John" ]);
});
// Start animation
$("#go").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});
// Stops all the currently running animations on all the specified elements.
// If any animations are queued to run, then they will begin immediately.
// Stop animation when button is clicked
$("#stop").click(function(){
$(".block").stop();
});
// Start animation in the opposite direction
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});
var n = 0;
$("div.oneClick").one("click", function(){
var index = $("div.oneClick").index(this);
$(this).css({ borderStyle:"inset",
cursor:"auto" }).text("this div be clicked");
$("#p4click").text("Div at index #" + index + " clicked." +
" That's " + ++n + " total clicks.");
});
$("#button1").click(function () {
update($("#spanFirst"));
});
$("#button2").click(function () {
$("#button1").trigger('click');
update($("#spanLast"));
});
function update(j) {
var n = parseInt(j.text(), 0);
j.text(n + 1);
}
// To pass arbitrary data to an event:
// $("p").click( function (event, a, b) {
// when a normal click fires, a and b are undefined
// for a trigger like below a refers too "foo" and b refers to "bar"
// } ).trigger("click", ["foo", "bar"]);
$("#p4click").bind("myEvent", function (event, message1, message2) {
console.log(message1 + ' ' + message2 + " from element: " + this.id);
});
$("#p4click").trigger("myEvent", ["Hello","World!"]);
// This particular method triggers all bound event handlers on an element (for a specific event type) WITHOUT executing the browsers default actions.
$("#old").click(function(){
$("input.handler").trigger("focus");
});
$("#new").click(function(){
$("input.handler").triggerHandler("focus");
});
$("input.handler").focus(function(){
console.log(arguments[0]); // Pass along a fake event by jQuery and no need to fix fake event
$("<span>Focused!</span>").appendTo("body").fadeOut(3000);
});
</script>
</body>
</html>
No comments :
Post a Comment