js如何实现模拟监听事件

最新推荐文章于 2023-04-03 16:03:50 发布
最新推荐文章于 2023-04-03 16:03:50 发布
阅读量832 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ray_seu/article/details/8442686
版权
本文介绍了如何使用JavaScript实现模拟监听事件，特别是在对象属性变化时触发指定的回调函数。通过Animal构造函数及其prototype上的onChange方法，当name属性改变时，会调用注册的回调函数通知属性变化。
摘要由CSDN通过智能技术生成
function Animal(name) {
  this.name = name;
  this.getName = function() {
      return this.name;
  }
  this.setName = function(name) {
      this.name = name;
      this._valueChangeHandler('name');
  }
  }
  Animal.prototype = {
    onChange: function(valueName, fun) {
        this["_" + valueName + "ChangeHandlers"] = this["_" + valueName + "ChangeHandlers"] || [];
        this["_" + valueName + "ChangeHandlers"].push(fun);
    },
    _valueChangeHandler: function(valueName) {
        var o = this["_" + valueName + "ChangeHandlers"];
        if (o) {
            for (var i = 0, n = o.length; i < n; i++) {
                var methodName = "get" + valueName.charAt(0).toUpperCase() + valueName.slice(1);
                o[i](this[methodName]());
            }
        }
       
    }
  }

var a = new Animal('zhangsan');
a.onChange('name', function(o) {
  console.log("1.my name is " + o);
});
a.onChange('name', function(o) {
  console.log("2.my name is " + o);
});
a.setName("zhangsanfeng"); 

function Animal(name) {

  this.name = name;

  this.getName = function() {

    return this.name;

  }

  this.setName = function(name) {

    this.name = name;

    this._valueChangeHandler('name');

  }

 }

 Animal.prototype = {

   onChange: function(valueName, fun) {

     this["_" + valueName + "ChangeHandlers"] = this["_" + valueName + "ChangeHandlers"] || [];

     this["_" + valueName + "ChangeHandlers"].push(fun);

   },

   _valueChangeHandler: function(valueName) {

     var o = this["_" + valueName + "ChangeHandlers"];

     if (o) {

       for (var i = 0, n = o.length; i < n; i++) {

         var methodName = "get" + valueName.charAt(0).toUpperCase() + valueName.slice(1);

         o[i](this[methodName]());

       }

     }

     

   }

 }



var a = new Animal('zhangsan');

a.onChange('name', function(o) {

  console.log("1.my name is " + o);

});

a.onChange('name', function(o) {

  console.log("2.my name is " + o);

});

a.setName("zhangsanfeng");function Animal(name) {

  this.name = name;

  this.getName = function() {

    return this.name;

  }

  this.setName = function(name) {

    this.name = name;

    this._valueChangeHandler('name');

  }

 }

 Animal.prototype = {

   onChange: function(valueName, fun) {

     this["_" + valueName + "ChangeHandlers"] = this["_" + valueName + "ChangeHandlers"] || [];

     this["_" + valueName + "ChangeHandlers"].push(fun);

   },

   _valueChangeHandler: function(valueName) {

     var o = this["_" + valueName + "ChangeHandlers"];

     if (o) {

       for (var i = 0, n = o.length; i < n; i++) {

         var methodName = "get" + valueName.charAt(0).toUpperCase() + valueName.slice(1);

         o[i](this[methodName]());

       }

     }

     

   }

 }



var a = new Animal('zhangsan');

a.onChange('name', function(o) {

  console.log("1.my name is " + o);

});

a.onChange('name', function(o) {

  console.log("2.my name is " + o);

});

a.setName("zhangsanfeng");function Animal(name) {

  this.name = name;

  this.getName = function() {

    return this.name;

  }

  this.setName = function(name) {

    this.name = name;

    this._valueChangeHandler('name');

  }

 }

 Animal.prototype = {

   onChange: function(valueName, fun) {

     this["_" + valueName + "ChangeHandlers"] = this["_" + valueName + "ChangeHandlers"] || [];

     this["_" + valueName + "ChangeHandlers"].push(fun);

   },

   _valueChangeHandler: function(valueName) {

     var o = this["_" + valueName + "ChangeHandlers"];

     if (o) {

       for (var i = 0, n = o.length; i < n; i++) {

         var methodName = "get" + valueName.charAt(0).toUpperCase() + valueName.slice(1);

         o[i](this[methodName]());

       }

     }

     

   }

 }



var a = new Animal('zhangsan');

a.onChange('name', function(o) {

  console.log("1.my name is " + o);

});

a.onChange('name', function(o) {

  console.log("2.my name is " + o);

});

a.setName("zhangsanfeng");




function Animal(name) {

  this.name = name;

  this.getName = function() {

    return this.name;

  }

  this.setName = function(name) {

    this.name = name;

    this._valueChangeHandler('name');

  }

 }

 Animal.prototype = {

   onChange: function(valueName, fun) {

     this["_" + valueName + "ChangeHandlers"] = this["_" + valueName + "ChangeHandlers"] || [];

     this["_" + valueName + "ChangeHandlers"].push(fun);

   },

   _valueChangeHandler: function(valueName) {

     var o = this["_" + valueName + "ChangeHandlers"];

     if (o) {

       for (var i = 0, n = o.length; i < n; i++) {

         var methodName = "get" + valueName.charAt(0).toUpperCase() + valueName.slice(1);

         o[i](this[methodName]());

       }

     }

     

   }

 }



var a = new Animal('zhangsan');

a.onChange('name', function(o) {

  console.log("1.my name is " + o);

});

a.onChange('name', function(o) {

  console.log("2.my name is " + o);

});

a.setName("zhangsanfeng");function Animal(name) {

  this.name = name;

  this.getName = function() {

    return this.name;

  }

  this.setName = function(name) {

    this.name = name;

    this._valueChangeHandler('name');

  }

 }

 Animal.prototype = {

   onChange: function(valueName, fun) {

     this["_" + valueName + "ChangeHandlers"] = this["_" + valueName + "ChangeHandlers"] || [];

     this["_" + valueName + "ChangeHandlers"].push(fun);

   },

   _valueChangeHandler: function(valueName) {

     var o = this["_" + valueName + "ChangeHandlers"];

     if (o) {

       for (var i = 0, n = o.length; i < n; i++) {

         var methodName = "get" + valueName.charAt(0).toUpperCase() + valueName.slice(1);

         o[i](this[methodName]());

       }

     }

     

   }

 }



var a = new Animal('zhangsan');

a.onChange('name', function(o) {

  console.log("1.my name is " + o);

});

a.onChange('name', function(o) {

  console.log("2.my name is " + o);

});

a.setName("zhangsanfeng");
闪电侠的博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js: 添加事件监听addEventListener、移除事件监听removeEventListener
彭世瑜的博客
08-26 3475
【代码】js: 添加事件监听addEventListener、移除事件监听removeEventListener。
JS 事件绑定、事件监听、事件委托详细介绍
10-21
主要介绍了JS 事件绑定、事件监听、事件委托详细介绍的相关资料,需要的朋友可以参考下
js实现事件发射监听（观察－订阅模式）
cotexarm7的专栏
04-27 1892
var eventEmitter = { emit: function (eventName) { var callbackArr = events[eventName] if ( callbackArr &amp;&amp; callbackArr.length) { for (var i = 0; i &lt; callbackArr.len...
javascript 模拟监听功能
黄彪博客
12-04 483
setInterval(initLogo,6000); function initLogo(){ //对需要监听的对象监听 setInterval(initLogo,6000); }   如果是局部刷新页面（监听），则不能使用这种方法，因为页面没有刷新，请求是每隔一段时间就会发送请求，这样请求数量就会以指数增长，这样会导致server崩溃   function l
JavaScript的事件监听
qq_56299755的博客
03-03 671
JavaScript的事件监听 1.事件 HTML DOM允许JavaScript对事件反应做出反应 JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。 这个例子中，用户点击h1的内容，会改变内容 <!DOCTYPE html> <html> <body> <!--这行避免出现乱码的问题--> <meta http-equiv="Content-Type" content="text/html; charset=utf-
JS 实现对象监听 - Kaiqisan
Kaiqisan的博客
06-23 3110
实现监听的底层原理，能够实现在数据修改的时候触发回调函数~
JS事件监听
一片涟漪
09-13 163
事件监听 事件监听就是让计算机等待某个事件的发生，当这个事件发生之后，对其做出一个相应，如等待鼠标单击按钮，单击发生时打开一个新的页面；但是你写的监听事件发现这件事情后，会进行阻止，让其无法跳转。 作用：实现多个事件的绑定 通用性的事件监听方法： （1）绑定HTML元素属性： （2）绑定DOM对象属性： document.getElementById(“xxx”).οnclick=test; <!DOCTYPE html> <html lang="en"> <head&
JS事件监听方法
weixin_57726973的博客
06-09 3780
我们在学习的时候，最初接触的事件绑定方式大多是传统事件绑定方法。传统事件绑定方法。 传统事件绑定方法的特点如下： 1.事件名称之间一定要加上on，比如：onclick、onload、onmousemove。2.兼容主流的浏览器，包括低版本的IE。3.当同一个元素绑定多个事件时，只有最后一个事件会被添加，并且传播模式只能是冒泡模式。二、addEventListener()方法特点：1.element.addEventListener(event, function, useCapture)中的第三个参数可以控
js 实现watch监听数据变化的代码
10-16
这个监听器可以应用于任何需要动态响应数据变化的场景，虽然它的功能可能不如Vue.js中的watch选项那样强大和灵活，但它展示了如何使用原生JavaScript来模拟这一功能。通过上述的构造函数、辅助函数以及特定的属性...
javascript触发模拟鼠标点击事件
10-16
本文详细介绍了如何使用JavaScript来触发模拟的鼠标点击事件，并提供了IE浏览器和其他现代浏览器（例如Chrome、Firefox）中实现的示例代码。 首先，要理解事件触发器的概念。事件触发器是一种机制，它使得开发者...
js-simulation:使用 JavaScript 的事件驱动模拟实现
07-21
JavaScript是一种广泛应用于Web开发的脚本语言，以其灵活性和强大的功能深受...在实际项目中，如`js-simulation-master`这样的压缩包可能包含了一个完整的JavaScript事件驱动模拟实现的示例代码，供开发者学习和参考。
js事件监听机制(事件捕获)总结
热门推荐
mrfang1413的博客
05-19 1万+
在前端开发过程中我们经常会遇到给页面元素添加事件的问题，添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同，le浏览器只有事件冒泡，没有事件监听的机制，对于事件监听的兼容性问题是最大的难题：1.直接把事件的方法写在页面结构上[javascript] view plain copyfunction eventfun(){   /...
模拟端口监听
CC的博客
05-19 1569
安装数据库之前想测一下防火墙，需要模拟一下端口监听，再从原地址telent目标地址的端口，使用nc命令模拟端口监听 nc -l 0.0.0.0 3306
监听器模拟用户在线
weixin_30650859的博客
09-20 88
　　由于会话管理机制的原因，用户需在不同的浏览器上进行登录。 期间可以访问onlineservlet查询在线用户列表。 　　　设置监听器： 1 package com.listener; 2 3 import java.util.LinkedList; 4 import java.util.List; 5 6 import javax.faces.applicat...
模拟侦听者模式/监听器
weixin_43823656的博客
01-16 262
在使用Swing编写一个窗口的时候，经常需要给一个控件加一个监听器，说的通俗点，就是当我们在界面中加一个按钮，想要让它实现对应的功能，就需要给它加一个监听器，当点击按钮的时候，就能完成需要的功能。所以今天我们来简单模拟一下监听器的内部实现过程~~ 假定给出一个类（可以理解成一个小小的框架），在这个类中，它可以实现自己原本的功能，对于一些功能，留到将来用户使用的时候，具体去实现。为了这个类的完整性，...
12-JS特效-事件监听原理
路遇惊喜
01-24 641
使用onclick绑定事件没办法绑定多个事件
【JS基础】事件监听
qq_42294095的博客
04-03 1252
hml、javaWeb、事件监听
Java事件侦听器函数_js事件监听器用法实例详解
weixin_29801567的博客
02-24 319
本文实例讲述了js事件监听器用法。分享给大家供大家参考。具体分析如下：1、当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。如下：window.onload = function(){var btn = document.getEle...
input 事件
marko_zheng的博客
12-24 5701
input 事件 1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js 3.onchange 当input失去焦点并且它的value值发生变化时触发 4.onkeydown 在 input中有键按住的时候执行一些代码 5.onkeyup 在input中有键抬起的时候触发的事件，...
js selenium监听事件
最新发布
11-09
但是，可以使用JavaScript来监听事件。以下是一个简单的示例，演示如何使用Selenium和JavaScript来监听事件： ```python from selenium import webdriver # 创建浏览器对象 driver = webdriver.Chrome() # 打开...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值