1.1.1、单个事件注册🔥
语法：
element.事件(function(){})
$(“div”).click(function(){事件处理程序})
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
1.2、jQuery事件处理🔥
1.2.1、事件处理 on()绑定事件🔥
-
on()方法在匹配元素上绑定一个或多个事件的事件处理函数 -
语法：
element.on(events,[selector],fn)
-
events：一个或多个空格分隔的事件类型，如 “click” 或 “keydown” -
selector：元素的子元素选择器
-
fn：回调函数，即绑定在元素身上的侦听函数
$(“div”).on({
mouseenter: function(){
$(this).css(“background”,“skyblue”);
},
click: function(){
$(this).css(“background”,“purple”);
}
})
①on() 方法优势1
- 可以绑定多个事件，多个处理事件处理程序。
$(“div”).on({
mouseover: function(){},
mouseout: function(){},
click: function(){}
})
- 如果事件处理程序相同
$(“div”).on(“mouseover mouseout”,function(){
$(this.toggleClass(“current”));
});
②on()方法优势2
- 可以事件委派操作.事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
$(“ul”).on(“click”,“li”,function(){
alert(“hello world!”);
});
//事件是绑定在ul身上，只有一个ul 添加了点击事件，但是触发对象是li，会发生事件冒泡，冒泡到父亲身上，父亲就会执行这个函数
- 在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
③on()方法优势3
动态创建的元素，click()没有办法绑定事件，on() 可以给未来动态生成的元素绑定事件
// 传统方法
$(“ol li”).click(function(){
alert(11);
})
var li = $(“
- 我是后来创建的
- ”)
$(“ol”).append(li);
// 没有用，动态创建的元素没有办法绑定事件
// on可以给未来动态创建的元素绑定事件
$(“ol”).on(“click”,“li”,function(){
alert(11);
})
var li = $(“
- 我是后来创建的
- ”)
$(“ol”).append(li);
- 我们都是好孩子
- 我们都是好孩子
- 我们都是好孩子
- 我们都是好孩子
- 我们都是好孩子
1.2.2、事件处理 off()解绑事件🔥
- off() 方法可以移除通过on()方法添加的事件处理程序。
$(“div”).off(); // 这个是接除了div身上的所有事件
$(“div”).off(“click”); //这个是解除了div身上的点击事件
$(“ul”).off(“click”,“li”); //这个是解绑事件委托
- 如果有些事件只想执行一次就不再执行，可以使用one() 方法
$(“p”).one(“click”,function(){
alert(11);
})
Document - 我们都是好孩子
- 我们都是好孩子
- 我们都是好孩子
我是屁
1.2.3、自动触发事件trigger()🔥
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
// 1.元素.事件()
$(“div”).click();
// 2.元素.trigger(“事件”)
$(“div”).trigger(“click”);
// 3.元素.triggerHandler(“事件”) 不会触发元素的默认行为
$(“div”).triggerHandler(“click”);
triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。
1.3、jQuery事件对象🔥
事件被触发，就会有事件对象的产生
element.on(events,[selector],function(event){})
-
阻止默认行为:
event.preventDefault()或者return false -
阻止冒泡 :
event.stopPropagation()
Document 自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数Java工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注Java获取）
读者福利
由于篇幅过长，就不展示所有面试题了，感兴趣的小伙伴
更多笔记分享
《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门即可获取！
[外链图片转存中…(img-CPbjlIwp-1712228826337)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注Java获取）
读者福利
由于篇幅过长，就不展示所有面试题了，感兴趣的小伙伴
[外链图片转存中…(img-dEAdhpqN-1712228826337)]
[外链图片转存中…(img-PaAkhjR3-1712228826337)]
[外链图片转存中…(img-rPOJMxeO-1712228826338)]
更多笔记分享
[外链图片转存中…(img-wnL8HjgM-1712228826338)]
《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门即可获取！
