console
const button = document.getElementById('button');
const box = document.getElementById("box");
button.addEventListener('click', () => {
Promise.resolve().then(()=>{
console.log('microtask1');
});
console.log('listener1');
});
button.addEventListener('click', () => {
Promise.resolve().then(()=>{
console.log('microtask2');
});
console.log('listener2');
});
button.click();
// button.addEventListener('click', ()=>{
// box.style.transform = "translateX(400px)";
// box.style.transition = "transform 1s ease-in-out";
// // getComputedStyle(box).transform;
// // box.style.transform = "translateX(500px)";
// requestAnimationFrame(()=>{
// requestAnimationFrame(()=>{
// box.style.transform = "translateX(100px)";
// })
// })
// })
button.addEventListener('click', () => {
box.style.transform = 'translateX(1000px)';
box.style.transition = 'transform 1s ease-in-out';
requestAnimationFrame(() => {
box.style.background = 'red';
requestAnimationFrame(() => {
box.style.transform = 'translateX(500px)';
box.style.background = 'blue';
});
});
}, { once: true});
const link = document.getElementById("link");
const nextClick = new Promise(resolve => {
link.addEventListener('click', resolve, { once: true })
});
nextClick.then(event => {
console.log('prevent');
event.preventDefault(); // 判断是否会preventDefault
});
// 如果手动点击link，event.preventDefault()有效，不会跳转到超链接，因为在回调执行后就执行微任务队列，从而将eventObject的canceled属性设置成功。
// link.click(); event.preventDefault() 无效，会跳转到超链接，因为微任务执行顺序在最后，eventObject的canceled属性未被设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>居中测试</title>
</head>
<body>
<button id="button">button</button>
<div id="box"></div>
<a id="link" href="www.baidu.com">百度</a>
</body>
</html>
#box{
width: 60px;
height: 60px;
}