js事件处理

关注

原创最新推荐文章于 2026-03-13 00:18:49 发布 538 阅读 AI 写同款· GEO 优化 ›

JS 中事件流和事件处理程序（详细整理） JS 中事件流和事件处理程序 JavaScript 与 HTML 的交互是通过事件实现的，事件代表文档或浏览器窗口中某个有意义的时刻（用户或浏览器执行了某种动作）。可以使用仅在事件发生时执行的监听器（也叫处理程序）来订阅事件。这个模型叫 “观察者模式”，其能够做到页面行为（在 JavaScript 中定义）与页面展示（在 HTML 和 CSS 中定义）的分离。一、事件流当你点击一个按钮时，实际上不光点击了这个按钮，还点击了它的容器以及整个页面。这个点击产生了不止一个事件。而是一个事件流。阅读详情

事件处理方式：3种

<!DOCTYPE html>
<html>

<head>
    <title>home</title>
</head>

<body>
    <!--方式1：嵌入-->
    <a href="#" class="link" onclick="console.log('click')">click me</a>
    <script src="btn.js"></script>
</body>

</html>

var btn=document.querySelector('.link');
// 方式2：绑定
btn.onmouseover =function(){
    console.log("over")
}

// 方式3：事件监听器
// 当para3为false：以冒泡方式出发管理器(就近至远)
// 当para3为false：以冒泡方式出发管理器（由远至近）
btn.addEventListener('mouseout',showout,false)
function showout(e){
    console.log('out')
    // 相关事件对象也会被传入处理函数
    console.log(e)
}

事件传播

<!DOCTYPE html>
<html>

<head>
    <title>home</title>

</head>

<body>

    <div id="con">
        <h1>item1</h1>
        <h2>item2</h2>
        <h3>item3</h3>
    </div>

    <script>
        // 这里只给div设置了事件处理，其子node也都有了相应的事件处理
        // 即，点击h1,h2也会输出click
        var con = document.querySelector('#con')

        con.onclick = function (e) {
            console.log(e.target.innerText)
            //e.stopPropagation();会停止事件传播(会且仅会触发一个事件处理器)
        }
    </script>
</body>

</html>