【js】js绑定事件的三种方法

最新推荐文章于 2024-06-04 10:37:05 发布

厨樱

最新推荐文章于 2024-06-04 10:37:05 发布

阅读量3.7k

点赞数 1

分类专栏：前端文章标签： javascript 前端 css

原文链接：https://blog.csdn.net/qq_52977867/article/details/123096915

版权

前端专栏收录该内容

46 篇文章 5 订阅

订阅专栏

本文介绍了四种HTML元素上的事件绑定方式：1)行内绑定，通过HTML属性直接指定事件处理函数；2)通过元素绑定事件，使用JavaScript获取DOM元素并设置事件处理；3)使用事件监听，添加事件监听器；4)删除事件监听，移除已添加的事件处理函数。这些方法展示了JavaScript对DOM交互的不同处理方式。

摘要由CSDN通过智能技术生成

1.行内绑定

<style>
        div {
            width: 400px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>
 
<body>
    <div onclick="cli1()"></div>
</body>
 
</html>
<script>
    // 绑定事件1
    function cli1(){
        alert('标签内部绑定事件1');
    }
</script>

2.通过元素绑定事件

<style>
        div {
            width: 400px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>
 
<body>
    <div onclick="cli1()"></div>
</body>
<script>
//绑定事件2 元素.on事件名= function name(params参数){}
var div_ = document.getElementsByTagName('div')[0];
 div_.onclick = function(){
       alert('通过元素绑定事件 绑定事件2')
 } 
</script>

3.通过事件监听绑定事件

<style>
        div {
            width: 400px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>
 
<body>
    <div onclick="cli1()"></div>
</body>
<script>
 
var div_ = document.getElementsByTagName('div')[0];
 
    div_.addEventListener('click', function () {
        alert('通过事件监听绑定事件');
    })
 
</script>

4.删除事件监听

 /* 
    给dom元素删除事件监听
    el_obj.removerEventListener(1,2);
    1: 要删除的事件名
    2：相关的事件处理函数（注意：该函数需要时一个外部处理函数）
    */
    btn_2.removeEventListener('click', fn);