薛伯一-20221108-DOM&BOM-02

一：笔记 鼠标事件：点击事件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]