传统DOM事件处理程序

传统DOM事件处理程序与比HTML事件处理程序相比,优点:可以将HTML和JS脚本分离。

它的操作形式如下 :

<body>
<div>传统DOM事件处理程序与比HTML事件处理程序相比,优点:可以将HTML和JS脚本分离。</div>
<button id="an">按钮</button>
<script>
    var elbtn=document.getElementById("an");

    /**
     * 对象有属性、方法、事件
     * 事件->方法->属性,事件会触发方法,方法会改变属性
     */
    //将方法赋值给事件
    elbtn.onclick=ty;
    function ty() {
        alert("这是传统DOM事件处理程序");
    }
</script>
</body>

  上面的例子是将一个无参数函数赋值给事件,下面演示如何将一个带参数的函数赋值给事件。

<body>
<div>传统DOM事件处理程序</div>
<button id="an">按钮</button>
<script>
    var elbtn=document.getElementById("an");
    //将带参数的函数赋值给事件,需要一个匿名函数来封装。
    elbtn.onclick=function () {say("JavaScript");};
    function say(mingzi) {
        alert("你好,"+mingzi+"!");
    }
</script>
</body>

  

原文地址:https://www.cnblogs.com/max-hou/p/9051470.html