js动态绑定事件方法

1.给对象绑定事件
var t = document.getElementById("tab1");
t.onclick = function tst(){
alert('');
}


2.绑定事件监听函数addEventListener() 或 attachEvent() 
addEventListener()函数语法:
elementObject.addEventListener(eventName,handle,useCapture);

参数 说明
elementObjectDOM对象(即DOM元素)。
eventName事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。
handle事件句柄函数,即用来处理事件的函数。
useCaptureBoolean类型,是否使用捕获,一般用false 。这里涉及到JavaScript事件流的概念,后续章节将会详细讲解。

attachEvent()函数语法:
elementObject.attachEvent(eventName,handle);
参数 说明
elementObjectDOM对象(即DOM元素)。
eventName事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。
handle事件句柄函数,即用来处理事件的函数。

注意:事件句柄函数是指“ 函数名 ”,不能带小括号。

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;
        }
    }
}
<span style="color: rgb(178, 34, 34); font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.4px; background-color: rgb(252, 252, 252);">这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句,避免浏览器出现错误提示。</span>
例如,为一个 id="demo" 的按钮绑定事件,鼠标单击时弹出警告框:

addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
    alert("又是一个警告框");
}
转自:http://www.itxueyuan.org/view/6338.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值