JavaScript 封装兼容的事件注册函数(call()改变this的指向)

最新推荐文章于 2023-09-13 14:12:44 发布
最新推荐文章于 2023-09-13 14:12:44 发布
阅读量284 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript call 事件注册
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houyanhua1/article/details/79864193
版权
本文探讨了如何在JavaScript中封装一个兼容的事件注册函数，并利用call()方法来改变函数执行时的上下文(this)指向。通过示例代码，展示了在不同场景下事件处理函数的正确绑定和调用。
摘要由CSDN通过智能技术生成


demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            border:10px dashed lightgreen;
        }
    </style>
    <script>

        //1、三种注册事件方式的处理函数中(handler函数)的this指向不一致
        //使用addEventListener的方式注册的点击事件的回调函数中的this 指向target
        //但是使用attachEvent的方式注册点击事件的回调函数中的this 指向window

        //2、3种注册事件方式中，回调函数内获取事件对象的方式也是不一致的(高版本通过形参直接获取event,低版本通过window.event获取)
        //要让他们统一，
        //在第二种的事件注册方式（attachEvent）中，手动给handler传递window.event

        function createEventRegister(){
            if(window.addEventListener){  //第一种方式
                return function(target, type, handler
最低0.47元/天 解锁文章
houyanhua1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决使用attachEvent函数时，this指向被绑定的元素的问题的方法
10-30
当我们使用`attachEvent`或`addEventListener`来为一个DOM元素添加事件监听器时，事件处理函数内部的`this`关键字默认指向的是该函数对象。但在某些场景下，我们希望`this`能够指向触发事件的那个DOM元素本身，这样...
js代码-封装函数 f，使 f 的 this 指向指定的对象
07-16
在实际项目中，根据需求选择合适的方法来封装函数，确保`this`指向正确，是编写可维护和高效JavaScript代码的关键。以上就是关于如何封装函数以控制`this`指向的一些常见策略和示例。理解并熟练运用这些技巧，可以...
JS通用的事件注册函数
想搞全栈的前端
09-21 708
JS通用的事件注册函数 function addEvent(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) //fo...
事件注册与回调函数
qq_44992071的博客
02-23 742
事件注册及回调函数 （理解可能有误，请给位给予指正，谢谢）
JavaScript的this,call(),apply(),bind()
退步原来是向前
03-14 957
（若使用本文，请注明出处；节选自http://www.digital-web.com/articles/scope_in_javascript，只是翻译关键部分）this是什么？？为了建立一个scope chain, 每个JavaScript的代码执行上下文都提供了this关键字。In its most common usage, this serves as an identity fu
封装兼容性事件监听函数
Nerver_give_up的博客
07-18 189
添加事件监听器的兼容 function addEven(node,evenType,funcName){ if(!node.addEventListener){ node.addEventListener(evenType,funcName,false); }else{ node.attachEvent("on" + evenType,funcName); } } 注释：node：表示要添加事件的节点，evenType：表示事件类型；funcName：执
javaScript：事件注册与事件监听
最新发布
qq_52799985的博客
09-13 987
在JavaScript中，可以使用事件注册和事件监听来处理网页上的交互和用户操作。事件注册是指将事件处理函数与特定的事件关联起来，以便在事件触发时执行相应的代码。事件监听是一种更高级的事件处理方式，它能够在同一个元素上同时监听多个事件，并在事件触发时执行相应的处理函数。
ES6中javascript实现函数绑定及类的事件绑定功能详解
10-19
另一种方法是使用Function.prototype.bind()方法来改变事件处理函数的this指向。这个方法会创建一个新的函数实例，其中的this值被永久设置为bind()调用时传入的第一个参数。 ```javascript class A { addEvent() {...
javascript浏览器兼容教程之事件处理
12-09
使用`call`方法确保`handler`函数在适当的上下文中执行，即`this`指向监听的元素。 5. **鼠标位置** IE的事件对象有`x`和`y`属性，Firefox有`pageX`和`pageY`。为了兼容，可以这样做： ```javascript function ...
老生常谈JavaScript面向对象基础与this指向问题
11-29
此外，还有其他影响`this`指向的情况，如箭头函数、call、apply、bind等方法，它们会显式地设置`this`的值。 总的来说，理解JavaScript中的面向对象和`this`的指向是掌握JavaScript OOP的关键。通过构造函数创建类...
完美解决IE低版本不支持call与apply的问题
09-04
主要是对解决IE低版本不支持call与apply的问题进行了详细的介绍。需要的朋友可以过来参考下，希望对大家有所帮助
js 创建 新标签 注册事件，和回调函数封装
zhinan5ai的博客
11-16 741
// 删除成功提示 function alertMsg(text,sel,func){ if($('#dlg_del_x').length > 0){ $('#dlg_del_x').remove(); } var model_div = document.createElement("div"); model_div.setAttribute("class","modal fad
编写一个通用的事件监听函数
jayjj214的博客
03-30 825
var Event = { // 页面加载完成后 readyEvent : function (fn) { if (fn == null) { fn = document; } var oldonload = window.onload; if (typeof window.onload != 'function...
JS中的call()方法和apply()方法用法总结
cherish_all的博客
06-04 468
JS中的call()方法和apply()方法用法总结 https://blog.csdn.net/ganyingxie123456/article/details/70855586
js中判断数据类型的方式 以及 如何解决bind在浏览器中的兼容问题 以及 bind call apply区别
qq_43512502的博客
06-25 1518
js中判断数据类型 typeof typeof只能判断：数字、字符串、布尔值、undefined、函数 Object.prototype.toString.call() 5 ‘[object Number]’ “abc” ‘[object String]’ true ‘[object Boolean]’ null ‘[object Null]’ undefined ‘[object U...
从源码简要分析Handler的原理
风行天下
07-24 284
Handler我们经常会用到，一般可以用来处理延时任务，或者进行异步耗时操作的同时更新UI等。 在使用过程中，不知道大家是否和我以前初学的时候一样有这样的疑惑： 一般我们都是在UI线程新建static hander对象，并且实现了它的HandleMessage()方法，然后在其他任何地方通过sendMessage()方法发送的消息，最后都会被handleMessage()所处理，包括子线程里调...
ajax的学习
_Ennio
08-05 271
记录自己对ajax\的理解， 首先要明白ajax是为了解决什么问题，简单来讲就是为了局部刷新页面，而不刷新整个界面。就比如现在有一个实时热度的显示，它是不断变化的，所以你肯定要不停的从数据库当中获取热度，进行显示，但是又只是更新热度，没有必要更新整个界面。这时候就用到了ajax，不断的向服务器发送请求，获取热度，之后使用js更新指定元素。那js是怎样更新的呢？ 昂，其实直接用jquery就可以...
注册事件响应函数
ZHANGPENGYE007的博客
09-03 548
事件响应函数能够异步地响应用户在网页上的操作，如点击鼠标、按下键盘等。它允许你创建动态的、能根据用户输入改变内容的网页。 为了使用事件响应函数，你需要对其进行注册（即告诉浏览器，当触发事件时，请调用这个函数）。对特定的用户输入， 有特定属性与之对应，我们把事件处理函数注册在这些属性上。 例如，如果希望点击鼠标后执行响应函数，就可以将事件响应函数注册在的onmousedown事件上，如下所示。
轻松拿下JavaScript（四）——对象字面量，this，call()和apply()方法，JS的异常处理
热门推荐
陈宗毅 技术在于分享
11-25 1万+
我们今天这讲主要讲解JavaScript的面向对象的几个内容：对象字面量，this，this，call()和apply()方法，Js的异常处理。 对象字面量： 1、我们之前看到的例子都是使用点标识符创建对象和成员的。比如： var temp=document.getElementById('example'); 我们使用了点来获取document这个对象的getEl
JavaScript实用工具方法封装实例与类型判断函数
"本文档主要介绍了JavaScript中常用工具方法的封装，作者在日常工作中频繁使用这些功能，因此将其整理出来，以便于他人学习和参考。文章详细列举了以下几种类型判断的方法： 1. type类型判断： - `isString(o)`：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值