javascript事件的绑定基础实例讲解（34）
更新时间：2017年02月14日 16:34:14 作者：厚积薄发2017
这篇文章主要为大家详细介绍了javascript事件的绑定基础实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js事件绑定的具体代码，供大家参考，具体内容如下
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var btn01 = document.getElementById("btn01");
//为按钮绑定一个单击响应函数
/*btn01.onclick = function(){
alert(1);
};
//再为按钮绑定一个单击响应函数
btn01.onclick = function(){
alert(2);
};*/
/*
* 使用 对象.事件 的形式不能同时为一个元素的同一个事件绑定多个处理函数，
* 如果绑定了多个，则后边的会将前边的覆盖掉
*
* 如果需要同时为一个事件绑定多个响应函数，则可以使用
* addEventListener()这个方法来绑定响应函数
* 参数：
* 1.要绑定的事件（字符串 不要on）
* 2.回调函数（事件触发时，该函数将会执行）
* 3.是否在捕获阶段触发事件（都传false）
*
* 使用这种方式可以同时为一个事件绑定多个响应函数，
* 响应函数按照绑定的顺序执行
*
* 该方法不支持IE8及以下的浏览器
* 在这些浏览器中需要使用 attachEvent()方法来实现相同的功能
*/
/*btn01.addEventListener("click",function(){
alert(1);
},false);
btn01.addEventListener("click",function(){
alert(2);
},false);
btn01.addEventListener("click",function(){
alert(3);
},false);*/
/*
* attachEvent()
* - 参数：
* 1.事件的类型（字符串 要on）
* 2.回调函数
*
* attachEvent()
* - 可以同时为一个事件绑定多个响应函数，但是它的执行顺序不一定
* ie9 ie10 先绑定先执行
* ie8 后绑定先执行
*
* 这个方法只支持IE10及以下的浏览器
*/
/*btn01.attachEvent("onclick" , function(){
alert(1);
});*/
/*btn01.attachEvent("onclick" , function(){
alert(2);
});
btn01.attachEvent("onclick" , function(){
alert(3);
});*/
/*
* 在正常浏览器中使用addEventListener()来绑定
* 它的响应函数中的this就是绑定事件的对象
* 而在IE中，使用的是attachEvent()来绑定的事件
* 而它的响应函数中的this是window
*/
bind(btn01 , "click" , function(){
alert(this);
});
};
/*
* 自定义一个函数，来兼容所有的浏览器
* 参数：
* obj 要绑定事件的对象
* eventStr 事件的字符串,不要on
* callback 回调函数，事件触发时调用的函数
*/
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//如果是正常浏览器
obj.addEventListener(eventStr , callback , false);
}else{
//IE8
/*
* attachEvent()中的回调函数的this是window，需要修改为obj
* this是谁由函数的调用方式决定
* 1.以函数的形式调用，this是window
* 2.以方法的形式调用，this是调用方法的对象
* 3.以构造函数的形式调用，this是新创建的对象
* 4.使用call和apply调用时，this是第一个参数
*/
obj.attachEvent("on"+eventStr , function(){
//在attchEvent()中不传递callback而是传递一个匿名函数
//这样在事件触发时，浏览器不会调用callback而是调用匿名函数
//在匿名函数中来调用回调函数
callback.call(obj);
});
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了如何创建 JavaScript 自定义事件，我们将通过文章学习到有关创建自定义事件，侦听自定义事件以及创建双击自定义事件所要了解的内容,需要的朋友可以参考一下2022-05-05
深入浅出JS的Object.defineProperty()
这篇文章主要介绍了深入浅出JS的Object.defineProperty()，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下2022-06-06
本篇文章是小编整理的关于javascript获取图片的top N主色值方法的详解以及代码分享，有兴趣的朋友参考下吧。2018-01-01
这篇文章主要为大家介绍了unicloud云开发进阶获取首页列表数据示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了JavaScript axios安装与封装案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了JavaScript与HTML的结合方法，利用实例向大家介绍JavaScript与HTML是如何结合的，内容很详细，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了Javascript模块化机制实现原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
在Web开发中文件下载功能是一个非常常见的功能,这篇文章主要给大家介绍了关于javascript下载文件5种方式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-11-11
原生JavaScript实现remove()和recover()功能示例
这篇文章主要介绍了原生JavaScript实现remove()和recover()功能,结合实例形式分析了javascript实现类似jQueryremove()和recover()功能的自定义函数,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了JS继承分类、原理与用法,结合实例形式较为详细的总结分析了javascript原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承和寄生组合式继承等相关原理及使用方法,需要的朋友可以参考下2019-01-01
最新评论