<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#p1").click(function(event){
alert(event.currentTarget === this);
}); //点击p1弹出true
$("#p2,#p3").each(function(i){
$(this).on("click",{x:i},function(event){
alert("序号：" + $(this).index() + "。段落的数据为: " + event.data.x);
});//点击弹出序号与数据
});
$("div").on("click","button",function(event){
$(event.delegateTarget).css("background-color", "pink");
});//使用css
$("a").click(function(event){
event.preventDefault();
alert("检查 preventDefault() 是否被调用: " + event.isDefaultPrevented());
});//点击查看是否被调用
$("div").click(function(event){
event.stopImmediatePropagation();
alert("检测 event.stopImmediatePropagation() 是否被调用: " + event.isImmediatePropagationStopped());
});//点击查看是否被调用
$("p").bind("test.something", function(event) {
alert( event.namespace ); });
$("button").click(function(event) {
$("p").trigger("test.something");
});//确定事件在命名空间中使用
$(document).bind('mousemove',function(e){
$("#zong").text("e.pageX: " + e.pageX );
}); //鼠标x轴
$(document).bind('mousemove',function(e){
$("#zong2").text(" e.pageY: " + e.pageY);
});//鼠标y轴
$("a").click(function(event) {
event.preventDefault();
$('<div/>').append('默认' + event.type + ' 阻止').appendTo('#xs');
});//默认点击阻止
$("a").mouseout(function(event) {
alert(event.relatedTarget.nodeName); // "DIV"
});//弹出被输入的元素类型
$("button").click(function(event) { return "hey"; });
$("button").click(function(event) {
$("p").html( event.result );
});//点击button在p中显示hey
$("a").click(function(event) {
alert(event.type);
}); // 点击a后弹出事件类型。
$('body').bind('keydown',function(e){
$('#xs').html(e.type + ': ' + e.which );
});//在body中记录键盘输入显示在#xs中
});
</script>
</head>
<style>
</style>
<body>
<p id="p1">点击弹出</p>
<p id="p2">点击弹出</p>
<p id="p3">点击弹出</p>
<div style="background:red;">
<p>点击DIV检测</p>
<button>更改背景颜色</button>
</div>
<a href="#" style="text-decoration:none;">检测</a>
<br />
<button>点击弹p</button>
<div id="zong"></div>
<div id="zong2"></div>
<div id="xs"></div>
</body>
</html>
