handle

2019-05-18 admin

handle是什么

什么是handle,Handle events on elements

handle使用教程帮助文档

handle

Handle events on elements

Dependency Status NPM version

browser support

Installation

npm install handle

API

handle(element, event, fn [, capture])

Handle event on element using fn. It returns a function that can be called to stop listening. e.g. to build once you could write:

var handle = require('handle');

function once(element, event, fn, capture) {
  var dispose = handle(element, event, function (el, event) {
    dispose();
    fn(el, event);
  }, capture);
}

Typical usage might look like:

var handle = require('handle');

handle(document.getElementById('my-button'), 'click', function (button, e) {
  e.preventDefault();
  // do something
});

handle(elements, event, fn [, capture])

You can handle the same event on a whole list of elements in one go. This does not need to be an array, it just needs to have a .length property that is a number and have indexed values. e.g.

var handle = require('handle');

handle(document.querySelector('[data-action="do-something"]'), 'click', function (button, e) {
  e.preventDefault();
  // do something
});

It too returns a dispose funciton.

handle(selector, event, fn [, capture])

This works just like jQuery’s $(document.body).delecate(selector, event, function (e) { fn(this, e) }). It too returns a dispose function.

The advantages/disadvantages of using this method are:

  • It will still capture the event if the element matching selector is added to the DOM after handle is called.
  • It captures the event later (i.e. after those handlers that were attached directly to elements lower in the DOM chain)
  • It only binds to one element, so can have better performance, but it must check every event for a match, so can have worse performance

e.g.

var handle = require('handle');

handle('[data-action="do-something"]', 'click', function (button, e) {
  e.preventDefault();
  // do something
});

If you want to delegate from something other than document.body you can select a start element via the .on method:

var handle = require('handle').on(document.getElementById('hideable-list'));

handle('li', 'click', function (li, e) {
  e.preventDefault();
  li.style.visibility = 'hidden';
});

handle.once(element|elements|selector, event [, capture])

Return a promise that is resolved with the event args once the event is fired. e.preventDefault() is also called since it must be called within the same turn to work.

Running Tests

Tests can be easilly run locally in the browser of your choice, and have passed if it ends with # ok. They are also run on testling-ci when pushed to the repository:

npm install
npm test

License

MIT

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-65224.html

文章标题:handle

相关文章
Do not mutate vuex store state outside mutation handlers.
今天遇到一个问题,将Vuex中数组的值赋给新的数组,新数组push时报上面的错误,代码如下 this.maPartListTable = this.$store.state.vehicleMa.maPartListTable; this.m...
2018-12-15
handlebars.js解析对象而不是[对象]
dzm提出了一个问题:Handlebars.js parse object instead of [Object object],或许与您遇到的问题类似。 回答者Jonathan Lonowski给出了该问题的处理方式: When outp...
2018-03-29
Do events handlers on a DOM node get deleted with the node?
Nathan Long提出了一个问题:Do events handlers on a DOM node get deleted with the node?,或许与您遇到的问题类似。 回答者MooGoo给出了该问题的处理方式: Event ...
2018-04-18
使用预编译的模板与Handlebars.js(jQuery移动环境)
user4035Marco提出了一个问题:Using pre-compiled templates with Handlebars.js (jQuery Mobile environment),或许与您遇到的问题类似。 回答者zokMarc...
2018-03-24
Calling methods in RequireJs modules from HTML elements such as onclick handlers
HostileFork提出了一个问题:Calling methods in RequireJs modules from HTML elements such as onclick handlers,或许与您遇到的问题类似。 回答者Simo...
2018-04-17
leaked-handles
leaked-handles是什么 什么是leaked-handles,Detect any handles leaked in node leaked-handles官网:官网 leaked-handles源码仓库:源码仓库 leake...
2018-10-24
handlebars
handlebars是什么 什么是handlebars,Handlebars provides the power necessary to let you build semantic templates effectively with...
2019-01-09
Handlebars partials 隐藏的力量
一个项目的机会再加上我自己的探索,让我对Handlebars partials有了更深的理解。事实证明,你可以做得比我了解的更多。 我最近在负责一个小项目,只有很少的静态页面。因为太小了,我们最开始没有使用模板系统。当项目开始往深一层推进时...
2018-09-13
How to handle ESC keydown on javascript popup window
Andrew Arnott提出了一个问题:How to handle ESC keydown on javascript popup window,或许与您遇到的问题类似。 回答者Gumbo给出了该问题的处理方式: Try somethin...
2018-04-10
How to handle JavaScript being disabled in AngularJS
Vadim KotovBrightIntelDusk提出了一个问题:How to handle JavaScript being disabled in AngularJS,或许与您遇到的问题类似。 回答者CommunityBrightIn...
2018-04-21
回到顶部