https://github.com/h-gh/yii-js-event-handler

Using this Library you can add `custom events` to elements. Your `custom events` will run whenever you define.
https://github.com/h-gh/yii-js-event-handler

event javscript jquery php yii2 yii2-asset yii2-assets yii2-widget yii2-widgets

Last synced: about 1 month ago
JSON representation

Using this Library you can add `custom events` to elements. Your `custom events` will run whenever you define.

• Host: GitHub
• URL: https://github.com/h-gh/yii-js-event-handler
• Owner: H-Gh
• License: mit
• Created: 2019-07-11T06:41:30.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-07-13T11:39:00.000Z (over 5 years ago)
• Last Synced: 2024-05-07T06:42:37.923Z (8 months ago)
• Topics: event, javscript, jquery, php, yii2, yii2-asset, yii2-assets, yii2-widget, yii2-widgets
• Language: JavaScript
• Size: 7.81 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

  

    

      

# Yii JavaScript event handler  

Using this Library you can trigger your `custom events` on some another elements trigger.      

![MIT License](https://img.shields.io/github/license/H-Gh/yii-js-event-handler.svg?style=flat-square)

![Code Size](https://img.shields.io/github/languages/code-size/H-Gh/yii-js-event-handler.svg?style=flat-square)

## Instalation  

```

 composer require hgh/yii-js-event-handler

```  

  

## Usage  

### Register Yii2 Asset

```php  

YiiJsEventHandlerAsset::register($this);  

```  

### Instantiate jQuery Plugin

There are two way of instantiate this `jQuery` plugin.

#### Use default attributes

To use default options you have to add two predefined attribute to your `html` element. You put your custom `JS` events into `data-events-to-run`. Separate your `custom events` using `space`. Then using `data-on` specify when these `custom events` should be trigger. The values that you can put in `data-on` follows `jQuery` events. Visit [Form events](https://api.jquery.com/category/events/form-events/), [Mouse events](https://api.jquery.com/category/events/mouse-events/) and [keyboard events](https://api.jquery.com/category/events/keyboard-events/) .

```html

  

```


#### Define your custom attributes

In other hand, You can define your custom attributes. For this you have to `instantiate` `eventHandler` plugin.

```javascript

$(document).ready(function () {

    $("[data-my-custom-on-attribute]").eventHandler({

        onEventAttribute: "data-my-custom-on-attribute",

        toRunEventsAttribute: "data-my-custom-to-run-events-attribute"

    });

});

```

Now, you can use these attributes like this:

```html

  

```

  

## Sample  

##### html  

```html  

  

 Click Me to Run Custom Event
  

```  

  

##### jquery  

```javascript  

$(document).ready(function () {  

  $(document).on("customEvent", function () {  

  alert("Custom event triggered");  

 });  

  $(document).on("anotherCustomEvent", function () {  

  alert("Another custom event triggered");  

 });});  

```