当封装事件监听事件时,是否需要改变this指向

2024-08-28

在JS事件封装时，addEventListener()方法的this问题

最近在写js的类库,模仿的是jquery的编程风格,当封装到事件监听的时候发现遇到了一个问题,代码是这样的: 上面是封装的一个事件委托的代码,我以为上面的封装跟普通的事件监听一样简单,结果我在调用时发现报错: 为什么会报这样的错,原来是不同于单一的onclick之类的事件,这边的this指向的是调用addEventListenner的的对象; 为了简化问题,我们将其拿到全局范围中单独去测试: 发现这里的this指向的就是div标签,这就是为什么在原型中调用$(this)会出错因为是执行的上下文

JAVA GUI 事件监听事件详解和案例.

GUI(图形用户界面) Graphical User Interface(图形用户接口) 用图形的方式, 来显示计算机操作的界面, 这样更方便更直观. CLI Command Line User Interface(命令行用户接口) 就是常见的 Dos 命令行操作. 需要记忆一些常用的命令, 操作不直观. Java 为 GUI 提供的对象都存在 java.awt 和 javax.swing 两个包中. Java 图形化界面的产品: eclipse 这个产品使用纯Java 语言编

DOM 事件监听事件冒泡事件捕获

addEventListener() 方法实例: // 当用户点击按钮时触发监听事件: document.getElementById("myBtn").addEventListener("click", displayDate); addEventListener() 方法用于向指定元素添加事件句柄. addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄. 你可以向一个元素添加多个事件句柄. 你可以向同个元素添加多个同类型的事件句柄,

js事件监听

/* 事件监听器 addEventListener() removeEventListener() 传统事件绑定: 1.重复添加会,后添加的后覆盖前面的. */ 示例代码中的html结构: <body> <button id = "btn1">按钮</button> </body> //代码示例 window.onload = function(){ //传统事件绑定 var oBtn = document.getElementById(

第34天学习打卡（GUI编程之组件和容器 frame panel 布局管理事件监听多个按钮共享一个事件）

GUI编程组件窗口弹窗面板文本框列表框按钮图片监听事件鼠标键盘事件破解工具 1 简介 GUi的核心技术:Swing AWT 1.界面不美观 2.需要jre环境为什么要学习GUI: 1.可以写出自己心中想要的一些小工具 2.工作时,也可能需要维护到swing界面,概率极小! 3.了解MVC架构,了解监听 2.AWT(抽象的窗口工具) 2.1 Awt介绍 1.包含了很多类和接口! GUI:图形用户界面 2.元素:窗口,按钮, 3.java.awt 2.2组件和容器 1 Fr

java 事件监听 - 控件

java 事件监听 //事件监听 //事件监听,写了一个小案例,点击按钮改变面板的颜色. import java.awt.*; import javax.swing.*; import java.awt.event.*; public class Index extends JFrame implements ActionListener{ //设置面板 Wdmb wdmb = new Wdmb(); //设置按钮 JButton anniu1 = new JButton("黄色");

记一次使用 removeEventListener 移除事件监听失败的经历

测试一测试代码如下 var Test = function() { this.element = document.body; this.handler = function() { console.log(this); }; this.element.addEventListener('click', this.handler.bind(this), false); this.destroy = function() { this.element.removeEventListener('c

react native 之事件监听和回调函数

同原生一样,react native 同样也有事件监听和回调函数这玩意. 场景很多,比如:A界面push到B界面,B界面再pop回A界面,可以给A界面传值或者告诉A刷新界面. 事件监听事件监听类似于iOS原生的通知,一个发,一个收即可. A界面收: import { DeviceEventEmitter } from 'react-native'; componentDidMount() { //收到监听 this.listener = DeviceEventEmitter.addListen

Android 监听事件

安卓中监听事件的三种实现方式 1.匿名内部类的实现方式 2.独立类的实现方式 3.实现接口方式实现一.匿名内部类的实现 1.首先声明一个Button //声明一个Button private Button Listener1; 2.设置Button的监听器,并且通过匿名内部类的方式实现 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //设置Bu

swift项目第六天：中间发布按钮的封装以及监听点击事件

import UIKit /* 总结:1:给UIButton写分类,新建文件swiftFile,一般为了区分起名字都是名字-Extension,要想调用UI控件需要导入 import UIKit框架,然后给系统的类写分类:extension UIButton {},提供类方法或是构造函数的方法,把与该控件有关的业务逻辑全封装在分类的内部.2:封装方法:类方法:都是以class开头,class func 函数名(参数)->返回值类型{业务逻辑代码,return 返回值}:例子: class fun

【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现

[背景]基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败. [解决思路]借助winform的HtmlElementEventHandler完成html 页面元素点击时winform执行相应方法. HTML <input type="button" id="searchBtn" onclick="searchResource()&qu

js 事件监听封装

var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(elemnt.attachEvent){//对ie进行判断 element.attachEvent('on'+

jquery中，使用append增加元素时，该元素的绑定监听事件失效

举例:如果在一个<div id="resultArea"></div>中,通过append添加一个id="checkOutTip"的文本框,监听值变化.常用的直接$("Selector").on("eventType",function(){})监听事件函数不起作用,例如该按钮的点击监听事件应该这样写: $("#resultArea").on("input property

jquery中，使用append增加新元素时，新增元素的绑定监听事件失效的解决办法

$("outerSelector").on("eventType","innerSelector",function(){}); 举例:如果在一个<div class="title"></div>中,通过append添加一个id="demo"的按钮,常用的直接$("Selector").on("eventType",function(){})监

Js事件监听封装（支持匿名函数）

先看demo:http://liutian1937.github.io/demo/EventListen.html/*绑定事件与取消绑定*/ var handleHash = {}; var bind = (function() { if (window.addEventListener) { return function(el, type, fn, capture) { el.addEventListener(type, function(){ fn(); handleHash[type]

Node.js 教程 05 - EventEmitter(事件监听/发射器 )

目录: 前言 Node.js事件驱动介绍 Node.js事件注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件继承EventEmitter 前言: 今天事儿太多了,没有发太多的东西.不好意思了各位. 本篇主要介绍Node.js中的事件驱动,至于Node.js事件概念的东西,太多了. 本系列课程主要抱着的理念就是,让大家慢慢的入门,我也尽量写的简单一点. 所以呢,本文事件驱动,大家的目标应该是:理解Node.js的事件驱动.会

JS 中的事件绑定、事件监听、事件委托

事件绑定要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件我们可以在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.onkeyd

Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年多的时间了,对jQuery算是比较了解了,唯一没做到的就是读源码.网上看到有人写jQuery源码解析的,我也没细看,个人觉得如果光是为了解析源码而解析源码,未免有点太劳神了,没有实际用途,我更倾向于在实际应用中遇到不懂的方法或是文档说明不清楚的地方,可以查找到相应的位置看下源码,足矣. 闲话不多讲了,今天的主

ZooKeeper(3.4.5) 使用Curator监听事件

转载:http://www.mamicode.com/info-detail-494364.html 标签: ZooKeeper原生的API支持通过注册Watcher来进行事件监听,但是Watcher通知是一次性的,因此开发过程中需要反复注册Watcher,比较繁琐.Curator引入了Cache来监听ZooKeeper服务端的事件.Cache对ZooKeeper事件监听进行了封装,能够自动处理反复注册监听,简化了ZooKeeper原生API繁琐的开发过程. 简单的示例: package com

ZooKeeper(3.4.5) - 使用 Curator(2.7.0) 监听事件

ZooKeeper原生的API支持通过注册Watcher来进行事件监听,但是Watcher通知是一次性的,因此开发过程中需要反复注册Watcher,比较繁琐.Curator引入了Cache来监听ZooKeeper服务端的事件.Cache对ZooKeeper事件监听进行了封装,能够自动处理反复注册监听,简化了ZooKeeper原生API繁琐的开发过程. 简单的示例: package com.huey.dream.demo; import java.util.concurrent.ExecutorS

jQuery中的事件监听方式及异同点

jQuery中的事件监听方式及异同点作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年多的时间了,对jQuery算是比较了解了,唯一没做到的就是读源码.网上看到有人写jQuery源码解析的,我也没细看,个人觉得如果光是为了解析源码而解析源码,未免有点太劳神了,没有实际用途,我更倾向于在实际应用中遇到不懂的方法或是文档说明不清楚的地方,可以查找到相应的位置看

当封装事件监听事件时,是否需要改变this指向

热门专题