专注国内外云服务器
分享建站技术教程

JavaScript事件绑定常用方法及自建函数bind()与兼容性问题解决是什么?

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

吾上云WORDPRESS教程最新“JavaScript事件绑定常用方法及自建函数bind()与兼容性问题解决是什么?”

JavaScript事件绑定常用方法及自建函数bind()与兼容性问题解决是什么?今天我们一起了解一下。

JavaScript事件绑定常用方法如下:

1、对象.事件=函数;

它只能同时为一个对象的一个事件绑定一个响应函数

不能绑定多个,如果有多个,后面的会覆盖前面的

2、addEventListener()

此方法也可以为元素绑定响应函数

参数:

●事件的字符串(不带on)

●回调函数,事件触发时执行

●是否在捕获阶段触发事件,一般都传false

使用此方法可以为一个元素的同一事件绑定多个响应函数

当事件触发时,按绑定顺序依次执行

3、attachEvent()

IE8及以下浏览器不支持addEventListener()方法,但可以使用attachEvent()方法起到同样的效果

●参数:

事件字符串(带on)

●回调函数

此方法也可以绑定多个函数,不过函数执行顺序与addEventListener()相反

4、this问题与解决

addEventListener()中的this是绑定事件的对象

attachEvent()中的this是window

如果要解决兼容性问题则需要统一两个方法的this

这里我们用到了call()方法

call()可以用来改变函数的this

自建函数bind()

自己定义一个函数用来给一个对象绑定事件

●思路

三个参数:对象,事件,回调函数

●兼容性:

通过if判断对象是否存在addEventListener方法来区分浏览器

●this问题的解决

由于传入的回调函数是浏览器调用的,我们无法去操作,所以我们在attachEvent()不直接传入回调函数,而是先定义一个匿名函数,然后在函数内部调用回调函数,并利用call方法改变this

示例代码

window.onload=function(){

varbtn1=document.getElementById(“btn1”);

bind(btn1,”click”,function(){

alert(this);

});

};

//定义一个函数bind(),用来为指定元素绑定事件响应函数

/*

*参数:

*obj要绑定事件的对象

*eventStr事件的字符串

*func回调函数

*/

functionbind(obj,eventStr,func){

//判断是否有addEventListener()方法

if(obj.addEventListener){

//大部分浏览器兼容的方式

obj.addEventListener(eventStr,func,false);

}

else{

//IE8及以下注意on

//obj.attachEvent(“on”+eventStr,func);//此方法this为window下面提供解决方法

//统一this不直接调用func而是在匿名函数内调用

obj.attachEvent(“on”+eventStr,function(){

//在匿名函数内调用回调函数利用call()方法将this改为obj

func.call(obj);

});

}

};

btn1

文章来源于互联网WORDPRESS教程:JavaScript事件绑定常用方法及自建函数bind()与兼容性问题解决是什么?,
阿里云服务器89元起,点击购买
腾讯云服务器95元/年起 点击购买

相关推荐: 如何移除WordPress网站隐私选项勾选框?

WordPress程序中如果使用自带的 comment_form 函数,默认输出一个确认是否存储评论 Cookie 记录的复选框,如果不想显示可以使用官方钩子去掉。那么如何移除WordPress网站隐私选项勾选框? 将以下代码添加到当前wordpress主题的…

赞(0)
未经允许不得转载:吾上云 » JavaScript事件绑定常用方法及自建函数bind()与兼容性问题解决是什么?
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们