动态为元素绑定事件
2019-04-05 本文已影响0人
yuanKevin
对于在页面加载时就被加载的元素，我们可以直接使用下面代码来为元素绑定事件
elementObject.onXXX = function(){}
但是对于页面动态新增的元素，是没有被绑定事件的，那么我们如何为这些新增元素绑定事件呢？
1.通过addEventListener在新元素被添加时为其绑定事件(不支持IE8及以下)
elementObject.addEventListener(eventName,handle,useCapture)
eventName是要绑定的事件，如click,change， handle是句柄，可以是myFunction()，也可以是匿名函数，直接写function(){}，useCapture是
| 参数 | 说明 |
|---|---|
| elementObject | DOM对象（即DOM元素） |
| eventName | 绑定的事件，如click,change，不需要on
|
| handle | 句柄，即用来处理事件的函数。可以是函数名myFunction，也可以是匿名函数，直接写function(){}
|
| useCapture | Boolean类型，是否使用捕获，一般用false 。 |
| 兼容性 | addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。 |
*注意：事件句柄函数是指“ 函数名 ”，不能带小括号。
2.通过attachEvent在新元素被添加时为其绑定事件(支持IE)
element.Object.attachEvent(eventName,handle)
| 参数 | 说明 |
|---|---|
| elementObject | DOM对象（即DOM元素） |
| eventName | 事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。 |
| handle | 事件句柄函数，即用来处理事件的函数。 |
所以如果要兼容IE8及以下浏览器，则可以使用这样的方法
function addEvent(obj,type,handle){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false)
}catch(e){
// IE8.0及其以下版本
try{
obj.attachEvent('on' + type,handle);
}catch{
}
}
}
