markdown JS事件绑定

Posted 2021-05-05

### 在DOM中直接绑定

```
//原生函数
<input onclick="alert('谢谢支持')" type="button" value="点击我，弹出警告框" />
```

```
//自定义函数
<input onclick="myAlert()" type="button" value="点击我，弹出警告框" />
<script type="text/javascript">
  function myAlert(){
    alert("谢谢支持");
  }
</script>
```

### 在JS代码中绑定

```
element.onclick=function(){
   //处理函数
}
```

```
<input id="demo" type="button" value="点击我，显示 type 属性" />
<script type="text/javascript">
  document.getElementById("demo").onclick=function(){
    alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素，这里是<div>标签
  }
</script>
```

优点：写法兼容到主流浏览器

缺点：当同一个element元素绑定多个事件时，只有最后一个事件会被添加

例如：

```
element.onclick=handler1;
element.onclick=handler2;
element.onclick=handler3;
```
上述只有handler3会被添加执行，所以我们使用另外一种方法添加事件

### 绑定事件监听函数：attachEvent和addEvenListener方法
```
//IE:attachEvent
elment.attachEvent("onclick",handler1);
elment.attachEvent("onclick",handler2);
elment.attachEvent("onclick",handler3);
上述三个方法执行顺序：3-2-1；

//标准addEventListener
elment.addEvenListener("click",handler1,false);
elment.addEvenListener("click",handler2,false);
elment.addEvenListener("click",handler3,false);
执行顺序：1-2-3；

//该方法的第三个参数是泡沫获取（涉及到JavaScript事件流的概念），是一个布尔值：当为false时表示由里向外，true表示由外向里

<div id="id1">
    <div id="id2"></div>
</div>

document.getElementById("id1").addEventListener("click",function(){console.log('id1');},false);
document.getElementById("id2").addEventListener("click",function(){console.log('id2');},false);
//点击id=id2的div，先在sonsole中输出，先输出id2，在输出id1

document.getElementById("id1").addEventListener("click",function(){console.log('id1');},false);
document.getElementById("id2").addEventListener("click",function(){console.log('id2');},true);
//点击id=id2的div，先在sonsole中国输出，先输出id1，在输出id2
```

addEventListener()是标准的绑定事件监听函数的方法，

是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；

但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。

所以，这种绑定事件的方法必须要处理浏览器兼容问题。

***

下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：
```
function addEvent(obj,type,handle){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false);
}catch(e){
try{ // IE8.0及其以下版本
obj.attachEvent('on' + type,handle);
}catch(e){ // 早期浏览器
obj['on' + type] = handle;
}
}
}

//这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。

//例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：

addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
alert("又是一个警告框");
}
```