<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
</head>
<body>
<p>star</p>
<!---->
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<!---->
<input value="+" type="button" onclick="add()">
<script src="jquery-3.4.1.js"></script>
<script>
//1.click事件绑定(可以绑定多个标签)
// $('p').click(function () {
// alert($(this).css('color','red')) //star变红
// alert(this.innerHTML)// star
// })
//=========================================================
//2.bind事件绑定--(用click触发)
// $('p').bind('click',function () {
// alert(this.innerHTML);//star
//
// })
//=========================================================
//3.用该方法绑定的事件不能被添加的新标签继承
// $('ul li').click(function () {
// alert(123);
// });
//=========================================================
//4.用该方法绑定的事件可以被添加的新标签继承(事件委托)
//给动态标签绑定事件的方法用on
// $('ul').on('click','li',function () {
// alert('position')
// });
//=========================================================
//同bind方法
// $('ul li').on('click',function () {
// alert('position')
// });//如果没有select，那么这样跟bind方法是一样的
//=========================================================
//5.on方法中的 [data]参数(用event调用data对象)
function show(event){
alert(event.data.f1);//star come up
}
$('p').on('click',{f1:'star come up'},show);
function add() {
var tag=document.createElement('li');
tag.innerHTML='⭐';
$('ul').append(tag);
}
</script>
</body>
</html>