zoukankan      html  css  js  c++  java
  • js onclick与addEventListener 区别及用法

    addEventListener(建议使用)好比一个监听容器,这个容器里面可以装很多个监听事件,而且每一个事件都会执行。

    onclick 在今天之前我使用这个(onclick)比较多(单纯的是因为看到的基本都是用这个,有个缺点就是同一个元素绑定两个不同的事件前一个事件会被后一个事件覆盖。

    今天在公司问了一下这两个的区别,印象很深刻,自己也验证了一下,我这里上一段我的验证代码(代码里面的‘222’会被覆盖不弹出),大家也可以试一下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>onclick and addEventListener</title>
            <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
        </head>
        <body>
            <div id="btnOk1">111</div>
            <script>
                document.getElementById('btnOk1').addEventListener('click',function(){
                    alert('111');
                });
                document.getElementById('btnOk1').addEventListener('click',function(){
                    alert('333');
                });
                document.getElementById('btnOk1').onclick = function(){
                    alert('222');
                }
                document.getElementById('btnOk1').onclick = function(){
                    alert('444');
                }
            </script>
        </body>
    </html>

  • 相关阅读:
    java-logic====吃货联盟
    jsp---》》》新闻发布系统的项目跟踪+++++++文件上传
    jsp---tomcat===》》内置对象
    JS中两个节点的关系
    HTML第二本书学习后记
    JavaScript:编程改变文本样式
    JavaS:网页中的显示和隐藏
    第一次做网页设计遇到的问题总结
    HTML中添加背景音乐
    表格的结构标记
  • 原文地址:https://www.cnblogs.com/l-520/p/8882399.html
Copyright © 2011-2022 走看看