js事宜详解一

2024年5月7日 195次阅读 来源: mengera88

事宜处置惩罚的要领：

1、直接在html中编写

比方：

<form>
    <input type="text" name="username" value="">
    <input type="button" value="Echo Username" onclick="alert(username.value)">
</form>

然则如许处置惩罚的事宜存在两个瑕玷，一个是时间差题目，一个是差别浏览器对标识符的剖析有差别，极可能会在接见非限制对象成员时失足。

2、JavaScript指定事宜处置惩罚递次

每一个元素都有本身的事宜处置惩罚递次属性，这些属性一般悉数小写，比方onclick。将这类属性的值设置为一个函数，就能够指定事宜处置惩罚递次，以下所示：

var btn=document.getElementById('btn');
    btn.onclick=function(){
        alert('clicked');
    }

在此，我们经由过程文档对象取得了一个按钮的援用，然后为它指定了onclick事宜处置惩罚递次。但要注重，在这些代码运转之前不会指定事宜处置惩罚递次，因而假如这些代码在页面中位于按钮背面，便可能在一段事宜内怎样单击都没有回响反映。

删除事宜：

btn.onclick=null;

以上都是DOM0级的事宜处置惩罚方式，而DOM2级事宜定义了两个要领，用于处置惩罚指定和删除事宜处置惩罚递次的操纵：addEventListener()和removeEventListener()。一切DOM节点中都包括这两个要领，而且它们都接收3个参数：要处置惩罚的事宜名、作为事宜处置惩罚递次的函数和一个布尔值。末了这个布尔值假如是true，示意在捕捉阶段挪用事宜处置惩罚递次；假如是false，示意在冒泡阶段挪用事宜处置惩罚递次。

比方，要再按钮上为click事宜增加处置惩罚递次，能够运用以下代码：

var btn=document.getElementById('myBtn');
btn.addEventListener("click",function(){
    alert(this.id);
},false);

与DOM0级要领一样，这里增加的事宜处置惩罚递次也是在其倚赖的元素的作用域中运转。

运用DOM2级要领增加事宜处置惩罚递次的重要优点是能够增加多个事宜处置惩罚递次。比方：

var btn=document.getElementById('myBtn');
btn.addEventListener("click",function(){
    alert(this.id);
},false);

btn.addEventListener("click",function(){
    alert("Hello World");
},false);

这里为按钮增加了两个事宜处置惩罚递次。这两个事宜处置惩罚递次会根据增加它们的递次触发。

经由过程addEventListener()增加的事宜处置惩罚递次之恩给你运用removeEventListener()来移除；移除时传入的参数与增加处置惩罚递次时运用的参数雷同。这也以为著经由过程addEventListener()增加的匿名函数将没法移除。由于传入removeEventListener()中的事宜处置惩罚递次函数必需与传入addEventListener()中的雷同。

在大多数情况下，都是将事宜处置惩罚递次增加到事宜流的冒泡阶段，如许能够最大限制的兼容种种浏览器。最好只在需要在事宜抵达目的之前截获它的时刻将事宜处置惩罚递次增加到捕捉阶段。

    原文作者：mengera88
    原文地址: https://segmentfault.com/a/1190000003085803
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞