https://github.com/csuwildcat/SelectorListener

Listen for CSS selector rule matches at document or element level
https://github.com/csuwildcat/SelectorListener

Last synced: 15 days ago
JSON representation

Listen for CSS selector rule matches at document or element level

• Host: GitHub
• URL: https://github.com/csuwildcat/SelectorListener
• Owner: csuwildcat
• License: other
• Created: 2012-08-05T17:18:20.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2018-11-30T18:29:17.000Z (almost 6 years ago)
• Last Synced: 2024-10-28T11:22:29.453Z (15 days ago)
• Language: JavaScript
• Size: 14.6 KB
• Stars: 207
• Watchers: 20
• Forks: 18
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: license.md

Awesome Lists containing this project

README

        
SelectorListener

================

Provides the following document/element methods to enable listening for CSS selector rule matches:

## Document-wide Selector Listeners

```javascript

var oneTwoThree = function(){

  alert('Listening for complex element sequences is easy as 1, 2, 3!');

};

document.addSelectorListener('.one + .two + .three', oneTwoThree);

document.removeSelectorListener('.one + .two + .three', oneTwoThree);

```

## Selector Listeners on Individual Elements

```javascript

var foo = document.getElementById('foo');

foo.addSelectorListener('.one + .two + .three', oneTwoThree);

foo.removeSelectorListener('.one + .two + .three', oneTwoThree);

```

## Support for At-Rules

```javascript

document.addSelectorListener(['@media (min-width: 500px)', 'h2:target'], someFn);

```

## Interesting Examples:

```javascript

// Listening for attribute value matches? Child's play.

document.addSelectorListener('.foo[bar="boom"]', function(){ ... });

// Listen for when elements are emptied of their children

document.addSelectorListener('*:empty', function(){ ... });

// How about a more performant way to listen for custom tooltip nodes document wide?

document.addSelectorListener('.tooltip:hover', function(){ ... });

// Act on inputs the moment any field fails native validation pattern logic

document.addSelectorListener('*:invalid', function(){ ... });

// Working with HTML5 sliders just got even easier

document.querySelector('#RandomForm').addSelectorListener('slider:out-of-range', function(){

  alert('Your slider value is now out of range! Oh noes!');

});

```