一、事件情况汇总

事件分为三部分：事件源：绑定事件的标签、事件对象：就是事件产生的相关数据、事件处理函数

二、标签绑定

<div onclick="_click(this)">2222</div>
<script>//通过传参形式的形式将事件源传给事件处理函数function _click(t){console.log(t)console.log(this)}
</script>

缺点：

1.违背了三层分离原则

2.无法获得事件对象

3.事件源需要在绑定的标签使用this关键传递

三、使用DOM0事件模型

语法结构：绑定事件标签.onXXX=匿名函数（事件处理函数）

<button id="btn" >点击一下</button>
<script>var _btn = document.getElementById("btn");_btn.onclick = function (event) {console.info(event)alert("hello，事件")console.log(this);}
</script>

这种方式完美的解决了三层分离问题，而且默认事件处理函数的第一个参数就是事件对象。

事件触发时，this就是指该事件在dom对象上触发。

四、使用DOM2事件模型

（一）语法结构

标签.addEventListener("xxxxx",匿名函数(事件处理函数))

let btn = document.getElementById("box");
btn.addEventListener("click", function(event){alert("ok");console.log(this);
}, false);

（二）注意

第一个参数不需要加on，直接写事件名称即可;

第二个参数是事件处理函数，函数第一个参数默认就是事件对象;

第三个参数Boolean值，表示捕获或者冒泡流。（true为捕获，false为冒泡）

（三）取消事件的绑定

dom2事件模型取消事件：div.removeEventListener("click",fn)

dom0事件模型取消事件：div.onclick = null

五、相关练习：图片切换

练习代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>非遗进校园</title><style>*{padding: 0px;margin: 0px;}a{text-decoration: none;color: white;}hr{color: #262626;}#dao_hang{width: 100%;height: 130px;background: linear-gradient(#a10000, #530000);opacity: 0.8;}#dao_hang > img{padding-left: 20px;padding-top: 10px;}.wo_de{width: 70px;height: 28px;float: right;text-align: right;font-size: 15px;color: white;margin-top: 10px;margin-right: 10px;}.xuan_xiang > ul > li{float: left;list-style: none;font-size: 18px;color: #262626;margin-left: 120px;margin-top: 20px;opacity: 0.8;}.xuan_xiang > ul > li:hover{opacity: 1;}.xuan_xiang_1{position: relative;}.xuan_xiang_2{position: absolute;display: none;}.xuan_xiang_2 > ul{width: 120px;background-color: white;list-style: none;margin-left: -12px;}.xuan_xiang_2 > ul > li{height: 30px;margin-top: 8px;text-align: center;padding-top: 10px;padding-bottom:10px;}.xuan_xiang_2 > ul > li > a{font-size: 15px;font-weight: 500;color: #262626;}.xuan_xiang_1:hover > .xuan_xiang_2{display: block;}#qie_tu > a > img{width: 100%;height: 650px;display: none;}#an_niu{list-style: none;position: absolute;left: 36%;bottom: 20px;}#an_niu > li{width: 90px;height: 15px;background-color: #262626;border-radius: 7px;float: left;margin: 10px;opacity: 0.5;}#biao_ti{font-size: 50px;font-weight: 800;color: #aa0000;text-align: center;margin-top: 80px;margin-bottom: 20px;font-family: 宋体;}#hr_1{width: 20%;border: 0.5px solid gray;margin: auto;margin-bottom: 60px;}#chuan_cheng_ren{width: 100%;height: 600px;background: url('img/传承人背景.jpg');background-size: cover;background-repeat: no-repeat;}.kuang2{width: 255px;height: 419px;border: 1.5px solid #7e6b56;float: left;margin-top: 80px;margin-left: 86px;}.ren{width: 240px;height: 400px;border: 1.5px solid #7e6b56;margin-top: 8px;margin-left: 6px;}.ren > a > img{width: 200px;height: 200px;border-radius:100px;margin-left: 20px;margin-top: 10px;}.name{color: #7e6b56;font-size: 18px;font-weight: 800;font-family: 宋体;text-align: center;margin-top: 10px;margin-bottom: 10px;}.jian_jie{color: #7e6b56;font-size: 15px;font-weight: 900;font-family: 宋体;margin-left: 10px;margin-right: 10px;}#dao_hang_2{width: 100%;height: 40px;}#dao_hang_2 > a >div {width: 120px;height: 30px;border-radius: 20px;background-color: #f5f5f5;float: left;font-size: 16px;text-align: center;border: 1px solid gray;margin-left: 23px;padding-top: 8px;}#dao_hang_2 > a{color: #080808;opacity: 0.8;}#dao_hang_2 > a:hover{opacity: 1;}#zuo_pin_tu{width: 100%;height: 950px;margin-top: 35px;}#zuo_pin_tu > div{width: 240px;height: 290px;border: 0.5px solid #c3c3c3;border-radius: 20px;margin-left: 43px;margin-bottom: 25px;float: left;}#zuo_pin_tu > div > a > img{width: 239px;height: 239px;border-radius: 20px;}#zuo_pin_tu > div > div{text-align: center;font-size: 20px;padding-top: 10px;}#shi_pin_zi{font-size: 30px;font-weight: 700;margin-top: 30px;margin-left: 35px;}.kuang{border: 0.5px solid #c3c3c3;}.shi_pin > div{width: 23%;height: 300px;float: left;margin-top: 20px;margin-left: 22px;}.shi_pin > div > a > img{width: 100%;}.shi_pin_zi_1{font-size: 20px;font-weight: 700;margin-left: 10px;}.shi_pin_zi_2{margin-left: 10px;margin-top: 10px;}.shi_pin_zi_2 > span:nth-child(3){text-align: right;padding-left: 90px;}.shi_pin_zi_2 > span:last-child{font-size: 15px;color: #7e7e7e;}#hr_2{width: 96%;border: 0.5px solid #bababa;margin-top: 670px;margin-left: 30px;}#zhi_bo_zi{font-size: 30px;font-weight: 700;margin-top: 30px;margin-left: 35px;}#hr_3{width: 96%;border: 0.5px solid #bababa;margin-top: 655px;margin-left: 30px;}#last{width: 100%;height: 200px;background-color: #313131;margin-top: 45px;}</style><script>window.onload = () => {let img_all=document.querySelectorAll("#qie_tu > a > img")let li_all=document.querySelectorAll("#an_niu > li")let timer = setInterval(change,4000)let i=0function change(event){img_all[i].style.display="none"li_all[i].style.opacity="0.5"i = ++i % img_all.lengthimg_all[i].style.display="block"li_all[i].style.opacity="1"}let one= document.getElementById("one")one.onclick=function(event){img_all[0].style.display="block"li_all[0].style.opacity="1"img_all[1].style.display="none"li_all[1].style.opacity="0.5"img_all[2].style.display="none"li_all[2].style.opacity="0.5"img_all[3].style.display="none"li_all[3].style.opacity="0.5"}let two= document.getElementById("two")two.onclick=function(event){img_all[0].style.display="none"li_all[0].style.opacity="0.5"img_all[1].style.display="block"li_all[1].style.opacity="1"img_all[2].style.display="none"li_all[2].style.opacity="0.5"img_all[3].style.display="none"li_all[3].style.opacity="0.5"}let three= document.getElementById("three")three.onclick=function(event){img_all[0].style.display="none"li_all[0].style.opacity="0.5"img_all[1].style.display="none"li_all[1].style.opacity="0.5"img_all[2].style.display="block"li_all[2].style.opacity="1"img_all[3].style.display="none"li_all[3].style.opacity="0.5"}let four= document.getElementById("four")four.onclick=function(event){img_all[0].style.display="none"li_all[0].style.opacity="0.5"img_all[1].style.display="none"li_all[1].style.opacity="0.5"img_all[2].style.display="none"li_all[2].style.opacity="0.5"img_all[3].style.display="block"li_all[3].style.opacity="1"}}</script></head><body><div id="body"><div id="dao_hang"><img src="img/logo.png" width="20%"/><div class="wo_de">我的账户</div><div class="xuan_xiang"><ul><li><a href="#">相关课程</a></li><li><a href="#">云直播</a></li><li><a href="#">知识百科</a></li><li><a href="#">地点介绍</a></li><li><a href="#">文化推荐</a></li><li class="xuan_xiang_1"><a href="#">文创设计板</a><div class="xuan_xiang_2"><ul><li><a href="#">文创产品DIY</a></li><li><a href="#">文创广告位</a></li><li><a href="#">线上商城</a></li><li><a href="#">商品分类</a></li><li><a href="#">订单</a></li></ul></div></li><li class="xuan_xiang_1"><a href="#">非遗进校园</a><div class="xuan_xiang_2"><ul><li><a href="#">线上报名入口</a></li><li><a href="#">报名公告栏</a></li><li><a href="#">相关搜索推送</a></li><li><a href="#">线下公益组织</a></li></ul></div></li></ul></div></div><div id="qie_tu"><a href="#"><img style="display: block;" src="img/tu_1.jpg"/></a><a href="#"><img src="img/tu_2.jpg"/></a><a href="#"><img src="img/tu_3.jpg"/></a><a href="#"><img src="img/tu_4.jpg"/></a></div><ul id="an_niu"><li style="opacity: 1;" id="one"></li><li id="two"></li><li id="three"></li><li id="four"></li></ul><div id="biao_ti">非遗传承人</div><div id="hr_1"></div><div id="chuan_cheng_ren"><div class="kuang2"><div class="ren"><a href="#"><img src="img/传承人1.jpg""/></a><div class="name">齐·宝力高</div><div class="jian_jie">&nbsp&nbsp齐·宝力高，男，1944年2月2日出生于内蒙古科尔沁草原，蒙古族，第二批国家级非物质文化遗产项目蒙古族马头琴音乐代表性传承人，内蒙古民族歌舞剧院副院长，国家一级演员。</div></div></div><div class="kuang2"><div class="ren"><a href="#"><img src="img/传承人2.jpg""/></a><div class="name">朱南孙</div><div class="jian_jie">&nbsp&nbsp朱南孙，女，汉族，1921年出生，江苏省南通人。上海中医学院教授、主任医师，系“朱氏妇科”第三代传人。国家级非物质文化遗产代表性项目中医诊疗法（朱氏妇科疗法）市级代表性传承人.</div></div></div><div class="kuang2"><div class="ren"><a href="#"><img src="img/传承人3.jpg""/></a><div class="name">金 文</div><div class="jian_jie">&nbsp&nbsp金文，中国唯一一位国家级云锦工艺美术大师，人类非物质文化遗产（云锦）国家级代表性传承人，研究员级高级工艺美术师，国家级非物质文化遗产代表性项目南京云锦木机妆花手工织造技艺国家级代表性传承人</div></div></div><div class="kuang2"><div class="ren"><a href="#"><img src="img/传承人4.jpg""/></a><div class="name">韩再芬</div><div class="jian_jie">&nbsp&nbsp女，汉族，1968年生，安徽潜山人。第二批国家级非物质文化遗产项目黄梅戏代表性传承人，安庆市文化局副局长，再芬黄梅艺术剧院院长，国家一级演员，第十七届中国戏剧梅花奖获得者。</div></div></div></div><div id="biao_ti">非遗名录</div><div id="hr_1"></div><div id="dao_hang_2"><a href="#"><div>剪纸</div></a><a href="#"><div>云锦</div></a><a href="#"><div>青瓷</div></a><a href="#"><div>缂丝</div></a><a href="#"><div>苏绣</div></a><a href="#"><div>石砚</div></a><a href="#"><div>陶瓷</div></a><a href="#"><div>昆曲</div></a><a href="#"><div>古琴</div></a><a href="#"><div>苗画</div></a></div><div id="zuo_pin_tu"><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div><div><a href="#"><img src="img/tu_2.jpg"/></a><div>《大美广州》</div></div></div><div id="shi_pin_zi">视频课程</div><div class="shi_pin" width=100%><div class="kuang"><a href="#"><img src="img/tu_2.jpg"/></a><div class="shi_pin_zi_1">有关非遗项目的学习视频</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/1.png"/ width="6%"></span><span>广东省非遗管理协会</span><span><img src="img/矢量库/数字人.png"/ width="6%"></span><span>2W+</span></div></div><div class="kuang"><a href="#"><a href="#"><img src="img/tu_2.jpg"/></a></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/1.png"/ width="6%"></span><span>广东省非遗管理协会</span><span><img src="img/矢量库/数字人.png"/ width="6%"></span><span>2W+</span></div></div><div class="kuang"><a href="#"><a href="#"><img src="img/tu_2.jpg"/></a></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/1.png"/ width="6%"></span><span>广东省非遗管理协会</span><span><img src="img/矢量库/数字人.png"/ width="6%"></span><span>2W+</span></div></div><div class="kuang"><a href="#"><a href="#"><img src="img/tu_2.jpg"/></a></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/1.png"/ width="6%"></span><span>广东省非遗管理协会</span><span><img src="img/矢量库/数字人.png"/ width="6%"></span><span>2W+</span></div></div><div class="kuang"><a href="#"><a href="#"><img src="img/tu_2.jpg"/></a></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/1.png"/ width="6%"></span><span>广东省非遗管理协会</span><span><img src="img/矢量库/数字人.png"/ width="6%"></span><span>2W+</span></div></div><div class="kuang"><a href="#"><a href="#"><img src="img/tu_2.jpg"/></a></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/1.png"/ width="6%"></span><span>广东省非遗管理协会</span><span><img src="img/矢量库/数字人.png"/ width="6%"></span><span>2W+</span></div></div><div class="kuang"><a href="#"><a href="#"><img src="img/tu_2.jpg"/></a></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/1.png"/ width="6%"></span><span>广东省非遗管理协会</span><span><img src="img/矢量库/数字人.png"/ width="6%"></span><span>2W+</span></div></div><div class="kuang"><a href="#"><a href="#"><img src="img/tu_2.jpg"/></a></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/1.png"/ width="6%"></span><span>广东省非遗管理协会</span><span><img src="img/矢量库/数字人.png"/ width="6%"></span><span>2W+</span></div></div></div><div id="hr_2"></div><div id="zhi_bo_zi">热门直播</div><div class="shi_pin" width=100%><div class="kuang"><a href="#"><a href="#"><img src="img/tu_2.jpg"/></a></a><div class="shi_pin_zi_1">有关非遗项目的学习视频</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/时间.png"/ width="6%"></span><span>2023-04-16 19:30:00 开播</span><span style="padding-left: 30px;"><img src="img/矢量库/主讲人.png"/ width="6%"></span><span>主讲人</span></div></div><div class="kuang"><a href="#"><img src="img/tu_2.jpg"/></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/时间.png"/ width="6%"></span><span>2023-04-16 19:30:00 开播</span><span style="padding-left: 30px;"><img src="img/矢量库/主讲人.png"/ width="6%"></span><span>主讲人</span></div></div><div class="kuang"><a href="#"><img src="img/tu_2.jpg"/></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/时间.png"/ width="6%"></span><span>2023-04-16 19:30:00 开播</span><span style="padding-left: 30px;"><img src="img/矢量库/主讲人.png"/ width="6%"></span><span>主讲人</span></div></div><div class="kuang"><a href="#"><img src="img/tu_2.jpg"/></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/时间.png"/ width="6%"></span><span>2023-04-16 19:30:00 开播</span><span style="padding-left: 30px;"><img src="img/矢量库/主讲人.png"/ width="6%"></span><span>主讲人<span></div></div><div class="kuang"><a href="#"><img src="img/tu_2.jpg"/></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/时间.png"/ width="6%"></span><span>2023-04-16 19:30:00 开播</span><span style="padding-left: 30px;"><img src="img/矢量库/主讲人.png"/ width="6%"></span><span>主讲人</span></div></div><div class="kuang"><a href="#"><img src="img/tu_2.jpg"/></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/时间.png"/ width="6%"></span><span>2023-04-16 19:30:00 开播</span><span style="padding-left: 30px;"><img src="img/矢量库/主讲人.png"/ width="6%"></span><span>主讲人</span></div></div><div class="kuang"><a href="#"><img src="img/tu_2.jpg"/></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/时间.png"/ width="6%"></span><span>2023-04-16 19:30:00 开播</span><span style="padding-left: 30px;"><img src="img/矢量库/主讲人.png"/ width="6%"></span><span>主讲人</span></div></div><div class="kuang"><a href="#"><img src="img/tu_2.jpg"/></a><div class="shi_pin_zi_1">毛泽东思想和中国特色社会主义</div><div class="shi_pin_zi_2"><span><img src="img/矢量库/时间.png"/ width="6%"></span><span>2023-04-16 19:30:00 开播</span><span style="padding-left: 30px;"><img src="img/矢量库/主讲人.png"/ width="6%"></span><span>主讲人</span></div></div></div><div id="hr_3" style="clear: both;"></div><div id="last"></div></div></body>
</html>

都看到这里了，创作不易，大家点个赞再走呗！！- ̗̀(๑ᵔ⌔ᵔ๑)

【web前端初级课程】第八章什么是事件？相关推荐

【web前端初级课程】第二章 CSS层叠样式表
目录一.使用CSS的方法二.CSS的选择器三.CSS的常见样式四.相关练习一.使用CSS的方法 (一)行内样式在标签的style属性中写CSS代码. (二)页面样式在head标签中添加s ...
【web前端初级课程】第三章 CSS的特殊样式
目录一.@media查询二.@font-face字体三.动画四.3D旋转效果五.网页布局六.相关练习:校园官网一.@media查询作用:主要用于在不同设备显示不同的页面. (电视:TV ...
js考试题 html5新特性,Web前端初级面试题总结
Web前端初级面试题总结发布时间:2018-11-02 11:17, 浏览次数:549 , 标签: Web Web篇: 1.常见的浏览器内核有哪些? IE:Trident内核 ...
网易微专业web前端开发课程视频教程分享
网易微专业web前端开发课程链接:点此下载密码:oeqx 限时领取视频教程
Web前端技术课程设计——技术栈【SpringBoot+Vue+MySQL+MyBatis】的在线英语考试系统
一.技术简介本网站使用了前后端分离的开发技术,是基于SpringBoot + VUE的在线英语考试系统,支持选择题.填空题.判断题.多选题.系统包含三种角色(管理员.老师.考生),实现的功能包含在线 ...
网易微专业web前端开发课程|价值1648元
下载地址: http://www.xah.biz/forum.php?mod=viewthread&tid=60 课程详情页面制作页面制作课程以解决实际案例为导向,从基础表现到原理深入 ...
WEB前端学习课程推荐
web前端学习过程中,发现一位实力老师讲得蛮好,讲课激情全是干货,学习课程链接(非免费): https://www.it666.com/sales?fid=813&burl=/course_s ...
Web前端学习课程笔记之HTML+CSS
课程来源:[千锋教育_Web前端最全教程从入门到精通(HTML+CSS全套)]https://www.bilibili.com/video/BV1p4411T765?vd_source=78a1550 ...
【wed前端初级课程】第一章什么是HTML
什么是WEB前端? 简单来说就是网页,只是这个网页它是由多种技术参与制作的,用来向用户展示的页面. HTML(超文本标签语言):它决定了网页的结构. CSS:网页的装饰器. JavaScript:Ja ...

【web前端初级课程】第八章什么是事件？

目录

一、事件情况汇总

二、标签绑定

三、使用DOM0事件模型

四、使用DOM2事件模型

五、相关练习：图片切换

一、事件情况汇总

二、标签绑定

三、使用DOM0事件模型

四、使用DOM2事件模型

（一）语法结构

（二）注意

（三）取消事件的绑定

五、相关练习：图片切换

练习代码：

都看到这里了，创作不易，大家点个赞再走呗！！- ̗̀(๑ᵔ⌔ᵔ๑)

【web前端初级课程】第八章什么是事件？相关推荐

最新文章

热门文章

【web前端初级课程】第八章 什么是事件？

目录

一、事件情况汇总

二、标签绑定

三、使用DOM0事件模型

四、使用DOM2事件模型

五、相关练习：图片切换

一、事件情况汇总

二、标签绑定

三、使用DOM0事件模型

四、使用DOM2事件模型

（一）语法结构

（二）注意

（三）取消事件的绑定

五、相关练习：图片切换

练习代码：

都看到这里了，创作不易，大家点个赞再走呗！！- ̗̀(๑ᵔ⌔ᵔ๑)

【web前端初级课程】第八章 什么是事件？相关推荐

最新文章

热门文章

【web前端初级课程】第八章什么是事件？

【web前端初级课程】第八章什么是事件？相关推荐