// 方式1：addEventListener（推薦）
document.getElementById('btn').addEventListener('click', function(e) {
    console.log('點(diǎn)擊了');
});
// 方式2：on事件屬性（簡(jiǎn)單場(chǎng)景可用）
<button onclick="alert('點(diǎn)擊了')">點(diǎn)我</button>
// 方式3：內(nèi)聯(lián)事件（不推薦，維護(hù)性差）
<div onmouseover="this.style.background='red'">懸停變紅</div>

element.addEventListener('click', function(e) {
    console.log(e.clientX, e.clientY);  // 鼠標(biāo)相對(duì)于視口的坐標(biāo)
    console.log(e.pageX, e.pageY);      // 鼠標(biāo)相對(duì)于文檔的坐標(biāo)
    console.log(e.target);              // 觸發(fā)事件的元素
    console.log(e.button);              // 哪個(gè)鍵：0左鍵，1中鍵，2右鍵
});

var box = document.getElementsByClassName("sliding_block")[0];
var isDrop = false;
var angle = 0;

// 按下：開(kāi)始拖拽
box.onmousedown = function(e) {
    var e = e || window.event;
    var x = e.clientX - box.offsetLeft;
    var y = e.clientY - box.offsetTop;
    isDrop = true;
};

// 移動(dòng)：實(shí)時(shí)更新位置和角度
document.onmousemove = function(e) {
    if (!isDrop) return;
    
    var e = e || window.event;
    var moveX = e.clientX - x;
    
    // 限制范圍 0~360
    var minX = 0, maxX = 360;
    if (moveX < minX) moveX = minX;
    if (moveX > maxX) moveX = maxX;
    
    box.style.left = moveX + "px";
    angle = moveX;
    
    $("#baidu_img").attr("style", "transform: rotate(" + angle + "deg);");
    $("#msg_angle_span").html(angle);
};

// 松開(kāi)：結(jié)束拖拽
document.onmouseup = function() {
    isDrop = false;
};

document.addEventListener('wheel', function(e) {
    // 避免在輸入框中觸發(fā)
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
        return;
    }
    
    e.preventDefault();  // 必須加，否則頁(yè)面會(huì)跟著滾
    
    if (e.deltaY > 0) {
        next_img();      // 滾輪向下 → 下一張
    } else {
        last_img();      // 滾輪向上 → 上一張
    }
}, { passive: false });  // passive: false 是關(guān)鍵

var floatingDiv = document.getElementById('floatingDiv');
var initialX = null, initialY = null;

floatingDiv.addEventListener('mousedown', function(e) {
    initialX = e.clientX - floatingDiv.getBoundingClientRect().left;
    initialY = e.clientY - floatingDiv.getBoundingClientRect().top;
    e.preventDefault();  // 防止選中文本
});

document.addEventListener('mousemove', function(e) {
    if (initialX === null) return;
    
    var deltaX = e.clientX - initialX;
    var deltaY = e.clientY - initialY;
    
    floatingDiv.style.left = deltaX + 'px';
    floatingDiv.style.top = deltaY + 'px';
});

document.addEventListener('mouseup', function() {
    initialX = null;
    initialY = null;
});

// ? 不推薦：進(jìn)入子元素會(huì)反復(fù)觸發(fā)
div.addEventListener('mouseover', function() {
    this.style.background = 'yellow';
});

// ? 推薦：只在進(jìn)入/離開(kāi) div 時(shí)觸發(fā)一次
div.addEventListener('mouseenter', function() {
    this.style.background = 'yellow';
});
div.addEventListener('mouseleave', function() {
    this.style.background = '';
});

var ticking = false;
document.addEventListener('mousemove', function(e) {
    if (!ticking) {
        requestAnimationFrame(function() {
            // 在這里寫(xiě)業(yè)務(wù)邏輯
            ticking = false;
        });
        ticking = true;
    }
});

.sliding_block {
    user-select: none;
    -webkit-user-select: none;
}

// ? 正確
box.onmousedown = function() { ... };
document.onmousemove = function() { ... };  // 綁在 document 上
document.onmouseup = function() { ... };    // 綁在 document 上

// ? 錯(cuò)誤
box.onmousemove = function() { ... };  // 鼠標(biāo)移出滑塊就失效

// ? 后面的會(huì)覆蓋前面的
btn.onclick = function() { alert(1); };
btn.onclick = function() { alert(2); };  // 只會(huì)彈出 2

// ? 用 addEventListener 可以綁定多個(gè)
btn.addEventListener('click', function() { alert(1); });
btn.addEventListener('click', function() { alert(2); });  // 兩個(gè)都會(huì)執(zhí)行