//上面的点击事件，效果相当于：
$(‘li’).on(‘click’, function(){
console.log( $(this).text());
})
1.2 on(事件, 执行子元素，事件处理函数)
当我添加一个按钮，点击按钮时，添加li，按钮的功能写在绑定点击事件的后面，就像这样：
效果：
新add的li没有被绑定上点击事件，
原因：因为文档从上到下解析，给原来的3个li绑定点击事件的代码先运行了，后面才动态新增的li
所以，就要用到事件委托，将事件委托给父元素，当子元素的事件被触发时，由于没有处理程序，会冒泡给父元素，让父元素来处理
//用事件委托
$(‘ul’).on(‘click’, ‘li’, function(){
console.log( $(this).text());
})
这样，即使button动态生成li的代码在后面，点击动态新增的li时，也能输出li对应的文本了
有关动态生成的元素的事件绑定，均需考虑委托
1.3 on(事件, 执行子元素，数据，事件处理函数)
还可以传递额外的数据给函数
//用事件委托
$(‘ul’).on(‘click’, ‘li’, {name:‘ccy’}, function(e){
console.log( $(this).text());
console.log(e.data); //事件中的data对象存储着传递进去的数据
})
事件中的对象：
- off()：解绑事件
2.1 off(事件)
//解除button上的click事件
$(‘button’).off(‘click’)
2.2 off(事件，处理函数名)
当同一个事件有多个处理函数，想要解绑其中一个时使用
注意写的时处理函数的名称，不是再写一次匿名函数
如：
这样是不能解绑的，第二个click事件的处理函数和解绑里写的函数是两个函数，不能起到解绑的作用
要像这样，才能解绑打印888的处理函数：
$(‘button’).on(‘click’, function(){
$(‘ul’).append(‘
- ’ + $(‘li’).length + ‘
- ’)
})
/* 第二个点击事件的处理函数 */
function test(){
console.log(888);
}
$(‘button’).on(‘click’, test)
$(‘button’).off(‘click’,test)
- one()：只执行一次事件
绑定的事件只执行一次
当用户有需要某个功能时，才展示相应的html结构，不需要时不展示，可以设计成点击之后有一个弹窗的效果，节省性能并提高网页的加载速度；当展示之后，关闭这个小弹窗，用户可能又一次需要这个功能，又点击一次，所以展示之后，不把弹窗html结构删除，也节省了重复加载同一个资源的性能
读者福利
========
由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）
