事件的绑定

实现事件的绑定,一般情况下都是使用onclick等方式实现,但是使用

使用对象.事件 = 函数的形式绑定响应函数,
* 它只能同时为一个元素的一个事件绑定一个函数,
* 不能绑定多个,如果绑定了多个,则后边会覆盖前边的。
* 如果实现绑定多个,则可以用addEventListener()实现或者attachEvent(IE8版本以下)则可以用addEventListener()

* 通过这个方法可以为元素绑定响应函数
* - 参数
* 1、事件的字符串 ,不要on
* 2、回调函数,当事件触发时,该函数会被调用
* 3、是否在捕获阶段触发事件,需要一个布尔值,一般都传fasle
*
* 使用addEventListener可以为一个元素的相同事件同时绑定多个响应函数,
* 这样子被触发时,响应函数将会按照函数的绑定顺序执行。
* 这个方法不支持IE8以下浏览器

 btn01.addEventListener('click',function(){
alert(1)
},false)
btn01.addEventListener('click',function(){
alert(2)
},false)

*
* 在IE8中可以使用attachEvent来绑定事件
* 参数:
* - 事件的字符串,要on
* - 回调函数
* - 这个方法也可以同时为一个事件绑定多个响应函数,
* 不同的是后绑定先执行,执行顺序和addEventListener顺序相反。

btn01.attachEvent("onclick",function(){
alert(1)
});

*
* 但是addEventListener兼容普通浏览器(不兼容IE8以下),而attachEvent兼容IE8(不兼容普通浏览器),
* 所以为了解决兼容性问题:
* 定义一个函数,用来指定元素绑定响应函数。
* addEventListener中的this,是绑定事件的对象
* attachEvent中的this中的this,是window
* 需要统一两个方法的this
*
* 参数:
* obj 要绑定事件的对象
* eventstr 事件的字符串
* callback 回调函数
*
*/

为了兼容以上所有的浏览器的话,则需要自己写一个绑定函数去解决这个问题。

以下是实现方式:

复制代码
bind(btn01,'click',function(){
    alert(this)
});
                
function bind(obj,evenstr,callback){
    if(obj.addEventListener){
    //大部分浏览器兼容的方式   
obj.addEventListener(evenstr,callback,false) }else{ //IE8及以下 //统一this的话,需要统一成button调用 /*attachEvent是window调用的 * this由谁调用方式决定 * callback.call(obj) */
obj.attachEvent("on"+evenstr,function(){ //在匿名函数中调用回调函数,就可以改变this对象了 callback.call(obj) }) }
复制代码

 

posted @   你若精彩,蝴蝶自来  阅读(163)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示