十四、鼠标事件

1. 鼠标事件

// 点击事件 => onclick

// 双击事件 => ondblclick

// 鼠标右键点击事件 => oncontextmenu

// 鼠标进入事件 => (onmouseenter || onmouseover) // onmouseover 比 onmouseenter 先执行

// 鼠标离开事件 => (onmouseleave || onmouseout) // onmouseout 比 onmouseleave 先执行

注意:如果元素里面存在子元素，鼠标在元素中移动时会反复触发 onmouseover 和onmouseout

// 鼠标移动事件 => onmousemove

// 鼠标按下事件 => onmousedown

// 鼠标弹起事件 => onmouseup

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

.a{

width: 200px;

height: 200px;

background-color: lightcoral;

}

.a .b{

width: 100px;

height: 100px;

background-color: lightcyan;

}

</style>

</head>

<body>

</div>

let a = document.querySelector('.a')

// 点击事件

a.onclick = function(){

console.log('点击事件');

}

// 双击事件（在两次点击事件后触发）

a.ondblclick = function(){

console.log('双击事件');

}

// 鼠标右键点击事件

a.oncontextmenu = function(){

console.log('右键事件');

}

// 鼠标进入事件 (onmouseover比onmouseenter先执行)

a.onmouseenter = function(){

console.log('鼠标进入enter');

}

a.onmouseover = function(){

console.log('鼠标进入over');

}

// 鼠标离开事件（onmouseout比onmouseleave先执行）

a.onmouseleave = function(){

console.log('鼠标离开leave');

}

a.onmouseout = function(){

console.log('鼠标离开out');

}

// 注意：如果元素里面存在子元素，鼠标在子元素中移动时会反复触发 onmouseover 和 onmouseout

// 鼠标移动事件（所有的事件方法，都有一个默认的参数：事件对象）

a.onmousemove = function(e){

// 获取鼠标指针位置

let {offsetX,offsetY} = e

// console.log('鼠标移动',offsetX,offsetY);

}

// 鼠标按下事件

a.onmousedown = function(){

console.log('鼠标按下');

}

// 鼠标弹起

a.onmouseup = function(){

console.log('鼠标弹起');

}

</script>

</body>

</html>

2. 视口宽高

window.innerWidth 返回视口宽度

window.innerHeight 返回视口高度

<!DOCTYPE html>

<html>

<head>

<style>

margin: 0;

padding: 0;

}

.dian{

width: 30px;

height: 30px;

background-color: red;

position: absolute;

}

.num{

font-size: 20px;

}

</style>

</head>

<body>

</div>

// window.innerWidth 返回视口宽度

// console.log(window.innerWidth);

// window.innerHeight 返回视口高度

// console.log(window.innerHeight);

// 生成元素的最大left值

let maxLeft = window.innerWidth - 30

// 生成元素的最大top值

let maxTop = window.innerHeight - 30

//该定时器生成点

//定时器有一个返回值

let timer1 = setInterval(() => {

// 创建一个div元素

let dian = document.createElement('div')

// 个创建的div元素添加类选择器样式

dian.className = 'dian'

dian.style.left = Math.random()*maxLeft+'px'

dian.style.top = Math.random()*maxTop+'px'

// 每个元素注册点击事件

dian.onclick = function(){

this.remove()

}

// 将创建的div元素添加到body中

document.body.appendChild(dian)

}, 500);

console.log(timer1);

//该定时器统计点的数量，并判断游戏是否结束

let timer2 = setInterval(() => {

//获取数量

let num = document.querySelectorAll('.dian').length

//显示当前点的数量

document.querySelector('#num').innerHTML = num

//判断游戏是否结束

if(num>=10){

alert('Game Over~~')

// 清除定时器

clearInterval(timer1)

clearInterval(timer2)

}

}, 100);

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

table{

border-collapse: collapse;

}

td,th{

text-align: center;

border:1px solid #ccc;

padding: 2px 10px;

}

td img{

width: 100px;

}

td input{

width: 40px;

text-align: center;

outline: none;

}

</style>

</head>

<body>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

<tfoot>

<tr>

</td>

</tr>

</tfoot>

</table>

//定义一个商品数组

let goodses = [

{

name:'iphone手机',

img:'https://img13.360buyimg.com/n7/jfs/t1/137629/3/23805/201521/61aa1b26Eda614739/0a66ec0ce614c97c.jpg',

price:5999,

count:5,

isck:false

{

name:'华为手机',

img:'https://img10.360buyimg.com/n7/jfs/t1/179598/36/6697/144323/60b47feaEf44a5eed/b88c0485ca234e0d.jpg',

price:6289,

count:2,

isck:true

{

name:'小米手机',

img:'https://img10.360buyimg.com/n7/jfs/t1/160230/34/12049/58798/60484a63Edd19d4bb/401ca05f7e2f047f.jpg',

price:2899,

count:7,

isck:false

{

name:'三星手机',

img:'https://img10.360buyimg.com/n7/jfs/t1/199895/25/19291/124250/61a9cd69E951b2336/bf9855e517120b39.jpg',

price:9399,

count:3,

isck:false

}

]

//加载商品信息

function loadGoodses(){

//循环商品数组

goodses.forEach(g=>{

// 每个商品信息，创建一个对应的tr

let tr = document.createElement('tr')

// 每个tr里面有7个td

let td1 = document.createElement('td')

// 每一个商品对应的那个复选框

let ck = document.createElement('input')

ck.type = 'checkbox'

ck.className = 'ck' //注意：这里只是加一个标记

// 设置复选框的选中状态

ck.checked = g.isck

// 注册复选框状态发生改变后事件

ck.onchange = function(){

//更新商品的状态

g.isck = ck.checked

//再次调用计算总计的方法

totalPrice()

// 判断是否需要更新全选复选框的状态

document.querySelector('#ckAll').checked = goodses.every(r=>r.isck)

}

td1.appendChild(ck)

let td2 = document.createElement('td')

td2.innerHTML = g.name

let td3 = document.createElement('td')

let img = document.createElement('img')

img.src = g.img

td3.appendChild(img)

// td4显示单价

let td4 = document.createElement('td')

td4.innerHTML = '￥'+g.price.toFixed(2)

let td5 = document.createElement('td')

// 减按钮

let btn1 = document.createElement('button')

btn1.innerHTML = '-'

// 给减按钮注册点击事件

btn1.onclick = function(){

g.count-- //商品数量减1

// 购买数量不能小于1

if(g.count<1) g.count=1

// 更新商品数量

count.value = g.count

// 更新商品小计

td6.innerHTML = '￥'+(g.price * g.count).toFixed(2)

//再次调用计算总计的方法

totalPrice()

}

td5.appendChild(btn1)

// 文本框

let count = document.createElement('input')

count.value = g.count //设置文本框的值

td5.appendChild(count)

let btn2 = document.createElement('button')

btn2.innerHTML = '+'

// 给加按钮注册点击事件

btn2.onclick = function(){

g.count ++ //商品数量加1

//更新界面

count.value = g.count

td6.innerHTML = '￥'+(g.price * g.count).toFixed(2)

//再次调用计算总计的方法

totalPrice()

}

td5.appendChild(btn2)

// td6里面显示的是单个商品的小计

let td6 = document.createElement('td')

td6.innerHTML = '￥'+(g.price * g.count).toFixed(2)

let td7 = document.createElement('td')

let del = document.createElement('button')

del.innerHTML = '删除'

// 给删除按钮注册点击事件

del.onclick = function(){

//删除tr标签

tr.remove()

// 获取当前商品在数组中的索引

let index = goodses.findIndex(r=>r.name===g.name)

//删除数组中的原始数据

goodses.splice(index,1)

//再次调用计算总计的方法

totalPrice()

}

td7.appendChild(del)

// 将所有的td添加到tr中

tr.appendChild(td1)

tr.appendChild(td2)

tr.appendChild(td3)

tr.appendChild(td4)

tr.appendChild(td5)

tr.appendChild(td6)

tr.appendChild(td7)

// 将tr添加到tbody中

document.querySelector('tbody').appendChild(tr)

})

}

//调用加载商品信息的方法

loadGoodses()

//计算总计的方法

function totalPrice(){

//计算出总计

let money = goodses.filter(r=>r.isck).reduce((a,b)=>a+b.count*b.price,0)

//显示总计

document.querySelector('#total').innerHTML = '￥'+money.toFixed(2)

}

//调用计算总计的方法

totalPrice()

//给全选复选框注册状态改变后事件

document.querySelector('#ckAll').onchange = function(){

let cks = document.querySelectorAll('.ck')

//更新DOM

cks.forEach(ck=>{

ck.checked = this.checked

})

//更新数据

goodses.forEach(g=>{

g.isck = this.checked

})

//再次调用计算总计的方法

totalPrice()

}

</script>

</body>

</html>

2021-12-06

2021-12-06

十四、鼠标事件

1. 鼠标事件

2. 视口宽高

推荐阅读更多精彩内容