Enlace de eventos
1. Vinculación de eventos
1.1box.onclick = function () {};
Solo se puede atar uno, la parte trasera cubrirá el frente
1.2addEventListener ()
addEventListener()
* - 通过这个方法也可以为元素绑定响应函数
* - 参数:
* 1.事件的字符串,不要on
* 2.回调函数,当事件触发时该函数会被调用
* 3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
*
* 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
* 这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
*
* 这个方法不支持IE8及以下的浏览器
1.3attachEvent ()
* * attachEvent()
* - 在IE8中可以使用attachEvent()来绑定事件
* - 参数:
* 1.事件的字符串,要on
* 2.回调函数
*
* - 这个方法也可以同时为一个事件绑定多个处理函数,
* 不同的是它是后绑定先执行,执行顺序和addEventListener()相反
2. Escriba una plantilla de función vinculante con buena compatibilidad
* 参数:
* obj 要绑定事件的对象
* eventStr 事件的字符串(不要on)
* callback 回调函数
*
function bind(obj, eventStr, callback){
eventStra = "on"+eventStr;
if (obj.addEventListener){
return obj.addEventListener(eventStr, callback, false);
} else{
//ie8:用浏览器调的话,this对象是window,所以传一个匿名函数,这样由函数来调,我们想怎么操作就怎么操作。
return obj.attachEvent(eventStra,function(){
call.call(obj);
});
}
}
//定义一个函数,用来为指定元素绑定响应函数
/*
* addEventListener()中的this,是绑定事件的对象
* attachEvent()中的this,是window
* 需要统一两个方法this
*/
3. Código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" id="btn01">按钮</button>
<script type="text/javascript">
var btn01 = document.getElementById("btn01");
/*
* 使用 对象.事件 = 函数 的形式绑定响应函数,
* 它只能同时为一个元素的一个事件绑定一个响应函数,
* 不能绑定多个,如果绑定了多个,则后边会覆盖掉前边的
* 如:btn.onclick = function(){
---------------------;
};
*
*/
/*
* addEventListener()
* - 通过这个方法也可以为元素绑定响应函数
* - 参数:
* 1.事件的字符串,不要on
* 2.回调函数,当事件触发时该函数会被调用
* 3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false
*
* 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
* 这样当事件被触发时,响应函数将会按照函数的绑定顺序执行
*
* 这个方法不支持IE8及以下的浏览器
*/
/* btn01.addEventListener("click",function(){
alert(1);
},false);
btn01.addEventListener("click",function(){
alert(2);
},false);
btn01.addEventListener("click",function(){
alert(3);
},false); */
/*
* attachEvent()
* - 在IE8中可以使用attachEvent()来绑定事件
* - 参数:
* 1.事件的字符串,要on
* 2.回调函数
*
* - 这个方法也可以同时为一个事件绑定多个处理函数,
* 不同的是它是后绑定先执行,执行顺序和addEventListener()相反
*/
// btn01.attachEvent("onclick",function(){
// //------------;
// });
//定义一个函数,用来为指定元素绑定响应函数
/*
* addEventListener()中的this,是绑定事件的对象
* attachEvent()中的this,是window
* 需要统一两个方法this
*/
/*
* 参数:
* obj 要绑定事件的对象
* eventStr 事件的字符串(不要on)
* callback 回调函数
*/
function bind(obj, eventStr, callback){
eventStra = "on"+eventStr;
if (obj.addEventListener){
return obj.addEventListener(eventStr, callback, false);
} else{
//ie8:用浏览器调的话,this对象是window,所以传一个匿名函数,这样由函数来调,我们想怎么操作就怎么操作。
return obj.attachEvent(eventStra,function(){
call.call(obj);
});
}
}
bind(btn01,"click",function(){
alert("我是bind绑定函数");
});
</script>
</body>
</html>