事件处理程序

Posted 2020-11-21 yuyujuan

 html事件处理程序

这种是通过指定onclick特性并将一些javascript代码作为它的值来定义的。由于这个值是JavaScript，因此不能在其中使用未经转义的HTML语法字符，例如和号(&)、双引号("")、小于号（<）或大于号（>）,为了避免使用HTML实体，这里使用单引号，如果想要使用双引号，就需要使用转义。

这样指定事件处理程序会创建一个封装着元素属性值的函数，这个函数中有一个局部变量event，就是事件对象。通过event变量，可以直接访问事件对象，在这个函数内部，this值等于事件的目标元素。

<input type="button" value="Click Me" onclick="alert(‘click‘)"/>
<input type="button" value="Click Me" onclick="alert(&quot;click&quot;)"/>
<input type="button" value="Click Me" onclick="alert(event.type)"/>
<input type="button" value="Click Me" onclick="alert(this.value)"/>
<input type="button" value="Click Me" onclick="alert(value)"/>

在HTML中定义的事件处理程序可以包含要执行的具体动作，也可以调用在页面其他地方定义的脚本。

<input type="button" value="Click Me" onclick="showMessage()"/>
<script>
     function showMessage(){
        alert("Hello word!");
     }
</script>

使用这种方式的时候，假设showMessage()函数是在按钮下方、页面的最底部定义的，如果用户在页面解析showMessage()函数之前就单击了按钮，就会引发错误。另外HTML和JavaScript代码紧密耦合，如果要更换事件处理程序，就需要同时更改HTML代码和JavaScript代码，因此，现在很多人都不再使用这种方法。

DOM0级事件处理程序

通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。每个元素都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick，将这种属性的值设置为一个函数，就可以指定事件处理程序。

使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此，这个时候的事件处理程序是在元素的作用域中运行的，程序中的this引用当前元素,可以在事件处理程序中通过this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

<input type="button" value="Click Me" id="inp"/>
<script>
     var btn = document.getElementById(‘inp‘);
     btn.onclick = function(){
         alert ("Click");
         alert(this.id);    //inp
         alert(this.type);  //button
     };
</script>

也可以删除通过DOM0级方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设为null即可。

btn.onclick = null;

DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含着两个方法，并且它们接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值，最后的布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

<input type="button" value="Click Me" id="DOM2">
<script>
    var DOM2 = document.getElementById("DOM2");
    DOM2.addEventListener("click",function(){
         alert(this.value);   //Click Me
    },false);
    DOM2.addEventListener("click",function(){
         alert(this.type);    //button
    },false);
</script>

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，移除时传入的参数与添加处理程序使用的参数相同，这意味着上面通过addEventListener()添加的匿名函数将无法移除。只能移除下面的事件处理程序。

<script>
    var DOM2 = document.getElementById("DOM2");
    var handler = function(){
        alert(this.id);
    };
    DOM2.addEventListener("click",handler,flase);
    DOM2.removeEventListener("click",handler,flase);
</script>