使用JavaScript给对象修改注册监听器

最新推荐文章于 2024-04-09 05:57:52 发布
最新推荐文章于 2024-04-09 05:57:52 发布
阅读量156 收藏 1
点赞数

我们在开发一些大型前端项目时，会遇到这样一种情况，某个变量上有个字段。我们想知道是哪一段程序修改了这个变量上的字段。比如全局变量window上我们自定义了一个新字段_name，我们想知道到底有哪些程序给这个字段赋了值。

一行行地调试肯定太费时间了。如果window这个变量的_name字段被程序赋值时，能执行我们自己实现的一个监听器，这样不就方便多了么？

监听器的实现很简单: 


<html><script>"use strict";function test(){  Object.defineProperty(window, "_name", {  get : function(){ console.log("gett is called ") },  set : function(newValue){      debugger;      console.log("_name is filled!!!!");
  },  enumerable : true,  configurable : true});for( var i = 0; i < 2; i++)   console.log(i);window._name = "2";
};
test();</script>

使用Object对象自带的方法defineProperty, 第一个参数为要监听的对象window，第二个参数为要监听的对象字段名称，_name。

第三个参数是一个对象，属性为set，意思是我们想监听window._name被赋值的这个事件。属性set的值为一个JavaScript函数，即我们自己定义的监听器。这个监听器，当window._name被其他JavaScript函数修改之后，就会触发。

webp

测试一下，在浏览器里执行上述代码，发现断点按照我们期望的被触发了：

webp

从调用栈也能发现确实是window._name = "2"这一行代码触发的断点，我们自己注册的属性修改监听器确实工作了。

webp

要获取更多Jerry的原创技术文章，请关注公众号"汪子熙"或者扫描下面二维码:


webp

webp


来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/24475491/viewspace-2213832/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/24475491/viewspace-2213832/

cnmik42448
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入浅析JavaScript中对事件的三种监听方式
10-23
最近这段时间因为每天要修改网站，为网站做特效，所以看了很多的js接触事件，自己只会使用一小部分，有时用的时候也比较混乱，现在系统的整理了一下，本篇文章跟大家分享的是JavaScript中对事件的三种监听方式
JavaScript基于面向对象实现的无缝滚动轮播示例
10-15
这个无缝滚动轮播示例展示了如何使用JavaScript面向对象编程来封装复杂的功能，使得代码更易于理解和维护。通过创建类，我们可以更好地组织和复用代码，同时也更容易扩展和修改功能，以适应不同的需求。在实际项目中...
js属性变化监听器
ming_311的专栏
07-03 252
JS事件监听器
wytccc的博客
11-04 449
给一个元素的某一个事件类型添加多个函数；精确删除某一个事件类型下的某一个函数
java 注册监听_Java中的事件监听注册
weixin_29229055的博客
02-15 1196
Java中的事件监听是整个Java消息传递的基础和关键。牵涉到两类对象：事件发生者和事件监听者。事件发生者是事件的起源，它可以是一个按钮，编辑框等。事件监听者就是事件的接受者，如果要想接收某个事件，它必须对该事件的发生者说一声：嗨，哥们，有事吱一声。这个过程相当与在事件发生者那儿注册了一下。当事件发生者真的有事件发生时，就会对所有对该事件注册的所有监听者送一份参考消息说：有内幕，有内幕！！事件监听...
JS实现绑定事件监听的几种方法详解
wangxuanyang_zer的博客
08-08 5810
事件监听是用于捕获和响应特定事件的机制。在Web开发中，事件是指用户在网页上进行的交互操作，例如点击按钮、鼠标移动、键盘输入等。通过事件监听，我们可以注册事件处理函数，当特定事件发生时，这些函数将被调用。事件监听的作用包括：交互响应：通过监听用户的交互操作，可以实现对用户输入的实时响应。例如，当用户点击按钮时，可以执行相应的操作，如提交表单、加载数据、显示/隐藏元素等。用户体验增强：通过事件监听，可以改善用户体验，使网页更具交互性和动态性。
面试题及答案100，JavaScript中注册、删除事件，浅谈前端消息机制原理
最新发布
m0_60147147的博客
04-09 303
IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！(img-t7C45aI5-1712613461452)]// (2)同一个元素 同一个事件可以添加多个侦听器(事件处理程序)// 2、事件监听注册事件 addEventListener。// (1)里面的事件类型是字符串 必定夹引号 并且不带on。打开ie浏览器，找到仿真-文档模式，调整ie版本为8。// 3、attachEvent ie9以前的版本支持。
lyriqo:使用香草JavaScript制作的歌词查找器应用
05-22
通过`document.querySelector`或`document.querySelectorAll`选择元素，`innerHTML`属性改变元素内容，以及`addEventListener`添加事件监听器，实现了用户界面与数据的动态交互。 2. **异步请求**：应用利用`...
javascript学习基础笔记之DOM对象操作
01-19
更规范的方法是使用`item()`方法，它是一个索引访问器，如`childNodes.item(0)`和`childNodes.item(1)`。 `document`对象还提供了直接访问某些关键元素的便捷属性，如`document.body`，可以直接获取`<body>`元素，...
javascript使用Dom改变超链接前面文本框的值
10-30
### JavaScript 使用 DOM 改变超链接前面文本框的值 #### 概述 在Web开发中，DOM（Document Object Model）是一种用于HTML和XML文档的标准对象模型。它将文档视为节点树，允许开发者通过JavaScript来访问、修改...
JavaScript注册监听事件与清除监听事件
zhangawei123的博客
11-04 8548
JavaScript中有两种方法可以注册监听事件，一种是传统的注册方式，on+事件名称的注册方法，如btn.onclick,还有方法监听事件注册方式，addEventListener()和ie8以下的attachEvent()。
javascript 对象注册自定义监听器
Jacoh的专栏
12-31 363
事件监听的方式实现js 对象事件的订阅/发布。 eventEmitter 主要有三个接口方法： registe: 注册事件监听 on: 订阅事件 emit: 发布事件 使用示例： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=
JS事件之方法监听注册方式
m0_74577714的博客
01-04 413
eventTarget.addEventlistener0)方法将指定的监听器注册到eventTarget (目标对象)上当对象触发指定的事件时，就会执行事件处理函数。eventTargetattachEvent)方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行。type:事件类型字符串，比如 click、mouseover，注意这里不要带on。listener:事件处理函数，事件发生时，会调用该监听函数。
JS事件监听的添加方法
weixin_30522095的博客
01-08 424
一、 我们一般在的事件添加时是这样做的： elm.onclick = function( ) { //handler } 这样的写法兼容主流的浏览器，但是存在一个问题，当同一个elm绑定多个事件时，只有最后一个事件会被添加 如：elm.onclick = handler1; elm.onclick = handler2; elm.onclick = hande...
js监听，鼠标移动事件，修改事件，点击事件，输入事件
qq_37605109的博客
01-12 2467
下边的这个是html和css代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*.div1{*/ /* margin-top: 10px;*/ /* margin-bottom: 20px;*/
JS 实现对象监听 - Kaiqisan
Kaiqisan的博客
06-23 3085
实现监听的底层原理，能够实现在数据修改的时候触发回调函数~
Listener监听器快速入门
skLit8的博客
07-29 277
Listener是JavaWeb三大组件(Servlet、Filter、Listener)之一。监听器可以监听就是在，session，request三个对象创建、销毁或者往其中添加修改删除属性时自动执行代码的功能组件。
super.onCreate(savedInstanceState); setContentView(R.layout.main);的意思
weixin_34392906的博客
02-27 544
main就是当前项目res下的layout里的main.xml文件。 setContentView就是设置当前的Activity显示的内容按main.xml布局。 super.onCreate(savedInstanceState)就是调用父类的onCreate构造函数， savedInstanceState是保存当前Activity的状态信息。 附： and...
使用JavaScript监听SVG
07-21
要使用JavaScript监听SVG的交互事件，你可以使用以下步骤： 1. 获取SVG元素：首先，使用JavaScript的`querySelector`或`getElementById`等方法获取到你想要监听事件的SVG元素。例如，可以使用`document.querySelector('#svgId')`来获取具有特定ID的SVG元素。 2. 添加事件监听器：使用`addEventListener`方法为SVG元素添加事件监听器。通过指定要监听的事件类型（例如click、mouseover等）和相应的处理函数，来定义你希望在事件触发时执行的操作。例如，可以使用以下代码为SVG元素添加点击事件监听器： ```javascript const svgElement = document.querySelector('#svgId'); svgElement.addEventListener('click', function(event) { // 在这里编写处理点击事件的代码 }); ``` 3. 在事件处理函数中执行操作：在事件处理函数中编写你希望在事件触发时执行的操作。根据具体需求，你可以更改SVG元素的属性、样式，或执行其他操作。例如，以下代码将在点击SVG元素时将其颜色更改为红色： ```javascript const svgElement = document.querySelector('#svgId'); svgElement.addEventListener('click', function(event) { svgElement.setAttribute('fill', 'red'); }); ``` 4. 可选：根据需要，你可以使用SVG元素的其他事件（如`mouseover`、`mouseout`等）进行更多的交互操作。同时，你还可以使用`event`对象来获取关于事件的更多信息，如鼠标位置、键盘按键等。 请注意，以上只是一个简单的示例，具体的事件处理逻辑和操作应根据你的具体需求进行调整。希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值