<style>
#box {
500px;
height: 500px;
background-color: pink;
}
</style>
</head>
<body>
<!--点击按钮，在div里面创建一个新的p元素-->
<input type="button" value="按钮" id="btn">
<div id="box">
<div>
<span>呵呵</span>
<p>11111</p>
<p>22222</p>
<p>33333</p>
<p>44444</p>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
//简单事件，给自己注册的事件 缺点：一次只能注册一个事件
$("div").click(function () {
alert("哈哈");
});
//bind方式
$("p").bind({
click:function () {
alert("呵呵")
},
mouseenter:function () {
alert("哈哈")
}
});
$("#btn").click(function () {
$("<p>我是新增加的p元素</p>").appendTo("div");
});
//delegate:代理，委托
//1. 给父元素注册委托事件，最终还是有子元素来执行。
//要给div注册一个委托事件,但是最终不是由执行，而是有p执行
//第一个参数：selector:事件最终由谁来执行。
//第二个参数：事件的类型
//第三个参数：函数，要做什么
//1. 动态创建的也能有事件 :缺点：只能注册委托事件
$("#box").delegate("p", "click", function () {
//alert("呵呵");
console.log(this);
});
});
</script>