传统DOM事件处理程序

时间:2024-09-02 12:36:26

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

它的操作形式如下 :

传统DOM事件处理程序

<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>

  

相关文章