事件
页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})
事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
// $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
// click事件；
[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件；如：
//$('ul li').on('click', function(){console.log('click');})的绑定方式和
//$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个
//li：$('ul').append('<li>js new li<li>')；这个新加的li是不会被绑上click事件的
//但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加
//li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<button>add</button>
<script src="jquery-3.3.1.js"></script>
<script>
// 事件绑定
// let eles=document.getElementsByTagName('li');
// for (let i=0; i<eles.length; i++) {
// eles[i].onclick=function () {
// alert('js');
// };
// }; // js绑定方式
// 简写
// $('ul li').click(function () {
// alert('jquery');
// });
// 全写
// $('ul li').bind('click',function () {
// alert('jquery');
// });
// 解除
// $('ul li').unbind('click');
// 事件委托on()
$('button').click(function () {
let $ele=$('<li>');
let len=$('ul li').length;
$ele.html((len+1)*111);
$('ul').append($ele);
});
// $('ul li').click(function () {
// alert('hello');
// }); // 新添加的li标签没有点击事件
$('ul').on('click','li',function(){
alert('hello');
}); // 新添加的li标签也有了点击事件
</script>
</body>
</html>