js事件处理

最新推荐文章于 2024-07-17 15:26:15 发布

FantDing

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量457

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/FantDing/article/details/71582337

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

事件处理方式：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>

FantDing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件处理

事件处理方式：3种<!DOCTYPE html><html><head> <title>home</title></head><body>  <a href="#" class="link" onclick="console.log('click')">click me</a> <script src="btn.js"></script>
复制链接

扫一扫