事件就是用户或浏览器自身执行的某种动作,响应某个事件的函数就叫做事件处理程序(或事件监听器)。

DOM0级事件处理程序

将一个函数赋值给一个事件处理程序属性,是JavaScript指定事件处理程序的传统方式。

<input id="Mybtn" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('Mybtn');
    btnClick.onclick = function showMessage() {
        alert(this.id);
    };
</script>

DOM2事件处理程序
DOM2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作:
1.addEventListener();
2.removeEventListener();
所有DOM节点中都包含这两个方法,都接受三个参数:
1.事件类型;
2.事件处理方法;
3.布尔值,如果是true表示在捕获阶段调用事件处理程序,如果是false,则是在事件冒泡阶段处理;

<input id="Mybtn" type="button" value="Click Here" />

<script type="text/javascript">
    var btnClick = document.getElementById('Mybtn');
    btnClick.addEventListener('click', function() {
        alert(this.id);
    }, false);//false表示该事件处理程序在冒泡阶段触发;
</script>

这样写的好处是我们可以为click事件添加多个处理程序:

<input id="btnClick" type="button" value="Click Here" />

<script type="text/javascript">

var btnClick = document.getElementById('btnClick');

btnClick.addEventListener('click', function() {
    alert(this.id);
}, false);

btnClick.addEventListener('click', function() {
    alert('Hello!');
}, false);

</script>

处理多个程序

对比DOM0级事件,添加多个处理程序,则会被覆盖
请输入图片描述

标签: none

添加新评论