zoukankan      html  css  js  c++  java
  • 事件绑定三种方式区别

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
    <!-- dom中直接绑定事件,缺点js和html混合文档结构清,当一个事件绑定多个函数只会执行第一个-->
    <button type="button" onclick="clck()" onclick="mousemove()">dom事件</button>
    <!-- js中绑定事件 支持度高,当一个事件绑定多个匿名函数只会执行最后一个-->
    <button type="button" id="button">js事件</button>
    <!-- js中绑定事件 当一个事件绑定多个函数将会依次执行-->
    <button type="button" id="buttons">事件函数</button>
    <script type="text/javascript">
    function clck(){
    console.log("dom————点击1");
    }
    function mousemove(){
    console.log("dom————点击2");
    }
    var button = document.getElementById("button");
    button.onclick = function() {
    console.log("js————点击1");
    }
    button.onclick = function() {
    console.log("js————点击2");
    }
    var buttons = document.getElementById("buttons");
    buttons.addEventListener("click",function() {console.log('事件函数————点击1');})
    buttons.addEventListener("click",function() {console.log('事件函数————点击2');})
    </script>
    </body>
    </html>

  • 相关阅读:
    设计模式(二)
    关于ICO
    js的中关于类的应用
    接口的实现顺序学习笔记[2]
    接口的继承学习笔记[1]
    设计模式(一)
    四种领域模型
    路径问题!!
    异步调用模式学习记录
    转:四人帮设计模式
  • 原文地址:https://www.cnblogs.com/mn007/p/14070029.html
Copyright © 2011-2022 走看看