js 怎么封装一个监听函数

2026-08-02

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]

使用MutationObserver对象封装一个监听DOM生成的函数

(function(win){ 'use strict'; var listeners = []; var doc = win.document; var MutationObserver = win.MutationObserver || win.WebKitMutationObserver; var observer; function ready(selector, fn){ // 储存选择器和回调函数 listeners.push({ selector: selector, fn: fn

JS-为句柄添加监听函数

具体谈如何实现JS为句柄添加监听函数之前先看一段代码,算是抛出这个问题. <html> <head> <title>JS为句柄添加监听函数</title> <script> function message(){ alert("hello!"); } </script> </head> <body> <center> <div onclick="message()

JS通用事件监听函数

JS通用事件监听函数版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var oldOnload=window.onload; if(typeof window.onload !='function'){ window.onload=fn; }else{ window.onload=function (){ oldOnload(); fn(); } } },//添加事假 add

封装一个Ajax工具函数

/*封装一个ajax工具函数*/ window.$ = {}; /*通过$定义一个ajax函数*/ /* * 1. type string 请求的方式默认是get * 2. url string 请求地址接口地址 * 3. async boolean 默认的是true * 4. data object {}请求数据 * * 5.success function 成功回调函数 * 6.error function 失败的回调函数 * */ $.ajax

Vue.js中 watch(深度监听)的最易懂的解释

<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: {

js与jquery实时监听输入框值变化方法

本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发

js与jquery实时监听输入框值的oninput与onpropertychange方法

文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容. 初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发.曲线救国一下,想到用 keydown 来解决.其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发的

gulp压缩html，css，js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理

一.初始化首先先做一个项目初始化,用来记录你项目中用到的工具再你项目文件下打开一个控制台,输入命令 yarn init -y 进行初始化输入命令yarn add gulp -g --- 全局安装gulp,这里我提前已经安装过了就不演示了,然后再输入命令yarn add gulp -S 局部安装,都安装完成过后输入命令 gulp -v,如果出现两个版本号,就代表都安装成功了接着在你的项目文件夹下新建一个文件名为 gulpFile.js js文件,名字必须叫这个,官方规定的,用来写gulp

移动端用js与jquery实时监听输入框值的改动

背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android和iOS都可以触发的keyDown和keyUp. 于是,百度出了新东西:oninput![需要配合propertychange,兼容 IE9 以下版本] 用法: JS: if(isIE) { document.getElementById("input").onpropertychange

JS原生未来元素监听写法

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数. addEventListener()函数语法:elementObject.addEventListener(eventName,handle,useCapture); 参数说明 elementObject DOM对象(即DOM元素). eventName 事件名称.注意,这里的事件名称没有“ on ”, 如鼠标单击事件 click ,鼠标双击事件 doubleclick , 鼠

js - 预加载+监听图片资源加载制作进度条

这两天遇到一个新需求:一个一镜到底的h5动画.因为功能的特殊性,就要求我们提前监听页面的静态图片是否全部加载完毕.即处理预加载. 总结下来,下次这种需求需要提前注意以下几点: 一.图片而不是背景图本来,我所用到的图都是用背景图制作的(因为非接口返回的图片都要求用背景图). 但是监听静态图片时,后来发现所用的方法监听不到背景图,所以改成了图片. 这是一个坑. 二.获取新加载的图片:Img.load() 1.要监听图片我们要先获取到页面中的所有图片:jq的方法:find() var MyImg =

Node.js自定义对象事件监听与发射

一.Node.js是以事件驱动的,那我们自定义的一些js对象就需要能监听事件以及发射事件.在Node.js中事件使用一个EventEmitter对象发出,该对象在events模块中.它应该是使用观察者设计模式来实现把事件监听器添加到对象以及移除,之前写OC那块的时候也有些观察者设计模式,在OC中也经常用到:通知中心.KVO,也很容易理解. .addListener(eventName,callback):将回调函数附加到对象的监听器中.当eventName的事件被触发时,回调函数被放置在事件队列

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

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

Angular.js中使用$watch监听模型变化

$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n

[No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】

1.添加时间监听: Chrom中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.document.window 或 XMLHttpRequest. type: 字符串,事件名称,不含"on",比如"click"."mouseover"."keydown"等. listener :实现了 Even

JS基础(二)事件监听练习之table鼠标悬停行变色

JS监听事件简单学习: [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件"); [object].removeEvent("事件类型","处理函数","冒泡事件或捕获事件"); 场景: 表格标题行背景色是黄色,奇数行是白色,偶数行是灰色. 鼠标悬停在行上的时候,触发事件,背景颜色变成红色. 效果如图: JavaScript代码: <scrip

使用jq把js代码封装一个自己的插件

为什么要把js功能封装成插件呢?我觉得有以下几点吧 1.最基本的原因就是便于代码复用. 2.便于维护和管理. 3.提升自身的能力. 4.避免各个相同功能组件的干扰,以及一些作用域会相互影响的问题. jq的标准封装方式 <script type="text/javascript"> (function ($) { //这里放入插件代码 })(jQuery); </script> 这是jQuery官方的插件开发规范,这样写是作用是: 1. 避免全局依赖.2. 避免第

js 移动端之监听软键盘弹出收起

js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. var winHeight = $(window).height(); //获取当前页面高度 $(window).resize(function(){ var thisHeight=$(this).height(); if(winHeight - thisHeight >50){ //当软键盘弹出

JS移动端如何监听软键盘回车事件

移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢? 方法很简单,就是在搜索框的input外面套一个form标签注意点:form标签一定得添加 action属性(可设置为空) <form action=""><input type="text" name="search" /></form> 移动端软键盘的回车会触发form的submit事

从零开始学习Node.js例子五服务器监听

httpsnifferInvoke.js var http = require('http'); var sniffer = require('./httpsniffer'); var server = http.createServer(function(req, res){ res.writeHead(, {'Content-Type': 'text/plain'}); res.end('Hello, World!\n'); }); sniffer.sniffOn(server); serv

js 怎么封装一个监听函数

热门专题