一：笔记 鼠标事件：点击事件click 双击事件dblclick 鼠标移入mouseover 鼠标移出mouseout 键盘事件：keyup keydown 表单事件：input鼠标：点击事件click; 双击事件dblclick; 鼠标移入mouseover;鼠标移出mouseout 键盘事件:keyup/keydown 表单事件:input;change 窗口事件：load；scroll；change [td]DOM&BOM-DAY02 | 鼠标事件 | 点击事件：click | 语法：变量名.addEventListener（‘click’，function（）{}） | 双击事件：dblclick | 语法：变量名.addEventListener（‘click’，function（）{}） | 鼠标移入：mouseover | 语法：box.addEventListener('mouseover', function (e){}） | 鼠标移出：mouseout | 语法：box.addEventListener('mouseover', function (e){}） | 键盘事件 | keyup | ipt.addEventListener('keyup', function () {}） | 特点：键盘弹起时才会打印 | keydown | ipt.addEventListener('keydown', function (){}） | 特点：会在第二次触发时打印 | 表单事件 | input | ipt.addEventListener('input', function () {}） | 特点：会在输入信息时就打印 | change | sel.addEventListener('change', function (){}） | change事件类型在输入框输入的值变化时响应，当上一次输入的值和当前输入的值不同时便会触发，会多次触发事件 | 窗口事件 | load | window.onload = function (){} | scroll | window.addEventListener('scroll', function (){} | 窗口的滚动条滑动时的事件，window.scrollY属性会显示离顶部的距离 | 隔行变色 | 1.获取dom节点 | 2.对dom节点进行遍历，对要变色的行进行if判断，添加类名进行变色 | <script> | const lis = document.querySelectorAll('li'); | lis.forEach(function (v, i) { | if (i % 2 == 0) { | v.className = 'on'; | } | else if (i % 3 == 0) { | v.className = 'off'; | } | }) | </script> | 换肤 | 1.给一个目标标签 | 2.获取dom节点 | 3.添加点击事件，设置换肤样式 | <script> | const box = document.querySelector('#box'); | box.addEventListener('click', function () { | box.style.backgroundColor = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`; | }) | </script> | 更换背景颜色 | 1.给一个目标标签 | 2.获取dom节点 | 3.添加点击事件，更换样式 | <script> | const body = document.body; | const but = document.querySelector('#but'); | body.addEventListener('click', function () { | let color = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`; | body.style.backgroundColor = color; | }) | </script> | 更换背景图片 | 1.给一个目标标签 | 2.获取dom节点 | 3.添加点击事件 | <script> | //获取dom节点 | const box = document.querySelector('#box'); | //添加点击事件 | let srcs = ['./02.jpg', './03.jpg'] | console.log(srcs) | box.addEventListener('click', function () { | let src = srcs[Math.floor(Math.random() * srcs.length)] | box.style.backgroundImage = `url(${src})` | }) | </script>[/td] |
| 欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) | Powered by Discuz! X3.4 |