'JavaScript——鼠標事件'

<div class="card">

<div class="aa">aa</div>

<div class="bb">bb</div>

<div class="aa">aa</div>

<div class="fuClass"><h4 id="Title">jiajia</h4></div>

<ul>

<li><a href="/" class="delete second">11</a></li>

<li>22</li>

<li>33</li>

</ul>

<a class="clear-task" href="#">清除</a>

</div>

const clearBtn=document.querySelector(".clear-task");

const card=document.querySelector(".card");

const heading=document.querySelector("h4");

//click

//clearBtn.addEventListener('click',runEvent)

//doubleclick

// clearBtn.addEventListener('dblclick',runEvent)

//mousedown

// clearBtn.addEventListener('mousedown',runEvent)

//mouseup

// clearBtn.addEventListener('mouseup',runEvent)

//mouseenter 和mouseleave 是一起使用

// clearBtn.addEventListener('mouseenter',runEvent) //只是進入的一次

//mouseover 和mouseout 是一起使用

// clearBtn.addEventListener('mouseover',runEvent); //在內部會有好多次

//mouseleave mouseout

// clearBtn.addEventListener('mouseleave',runEvent);

clearBtn.addEventListener('mouseout',runEvent);

//mousemove 鼠標移動觸發

card.addEventListener('mousemove',runEvent)

function runEvent(e){

console.log(`event type:${e.type}`);

heading.textContent=`mouseX:${e.offsetX},mouseY:${e.offsetY}`;

document.body.style.backgroundColor=`rgb(${e.offsetX},${e.offsetY},40)`;

//e.preventDefault();

}