JS基础知识点：原生DOM绑定事件

王小涵的笔记

已于 2022-09-20 08:32:02 修改

阅读量499

点赞数 3

分类专栏： JS 文章标签： javascript 前端开发语言

于 2022-09-16 11:18:08 首次发布

本文链接：https://blog.csdn.net/weixin_68938791/article/details/126886599

版权

JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

【简单的JS知识点，复习用】

原生DOM绑定事件

事件绑定有三种方式
1.行内绑定

<body>
    <p class="aaa" onclick="handle(1)">点击</p>
</body>
<script>
    function handle(item) {
        console.log(item);
    }
</script>

2.选择到元素添加事件

<body>
    <div class="box">
        <p class="aaa">点击</p>
    </div>
</body>
<script>
    document.querySelector('.box').onclick = function (e) {
        console.log(1);
        console.log(this);//当前绑定事件的标签
        console.log(e);//点击的事件对象
        console.log(e.target);//触发事件的元素
        console.log(e.currentTarget);//绑定事件的元素或标签
    }
</script>

3.添加事件监听

<body>
    <div class="box">
        <p class="aaa">点击</p>
    </div>
</body>
<script>
    //事件监听有三个参数 （事件名，回调函数，事件类型true 事件捕获 false 事件冒泡）
    document.querySelector('.box').addEventListener('click', (e) => {
        console.log(1);
        console.log(this);//window
        console.log(e);//点击的事件对象
        console.log(e.target);//触发事件的元素
        console.log(e.currentTarget);//绑定事件的元素或标签
    }, true)
</script>