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

相关文章
leaked-handles
leaked-handles是什么 什么是leaked-handles,Detect any handles leaked in node leaked-handles官网:官网 leaked-handles源码仓库:源码仓库 leake...
2018-10-24
handlebars.js解析对象而不是[对象]
dzm提出了一个问题:Handlebars.js parse object instead of [Object object],或许与您遇到的问题类似。 回答者Jonathan Lonowski给出了该问题的处理方式: When outp...
2018-03-29
使用预编译的模板与Handlebars.js(jQuery移动环境)
user4035Marco提出了一个问题:Using pre-compiled templates with Handlebars.js (jQuery Mobile environment),或许与您遇到的问题类似。 回答者zokMarc...
2018-03-24
逻辑运算符在handlebars.js { { } } #如果条件
Mike Robinson提出了一个问题:Logical operator in a handlebars.js {{#if}} conditional,或许与您遇到的问题类似。 回答者Peter BrattonNick Kitto给出了该...
2018-03-03
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
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
如何重写ExceptionHandler美元实施
dnc253提出了一个问题:How to override $exceptionHandler implementation,或许与您遇到的问题类似。 回答者I’m Backdnc253给出了该问题的处理方式: Another option...
2018-03-23
React: this is null in event handler
Midiparse提出了一个问题:React: this is null in event handler,或许与您遇到的问题类似。 回答者Alexander T.给出了该问题的处理方式: You need set this for sub...
2018-04-12
How to handle JavaScript being disabled in AngularJS
Vadim KotovBrightIntelDusk提出了一个问题:How to handle JavaScript being disabled in AngularJS,或许与您遇到的问题类似。 回答者CommunityBrightIn...
2018-04-21
Why do I get message: "Unhandled event loop exception Java heap space" in Eclipse when using javascript autocomplete?
Kellindiluser1769128提出了一个问题:Why do I get message: “Unhandled event loop exception Java heap space” in Eclipse when using...
2018-04-24
回到顶部