Chrome Plugin Visual Event View DOM element binding event

Find this tool for a long time, unified find, developers rare good stuff, collection do share.

View DOM-bound events with the Chrome plugin visual event Introduction to Visual event

Visual event is an open source Javascript bookmark that provides debugging information for events that are bound to DOM elements. Visual event can display the following information:

1. Which element has an event binding

2. Type of event bound by an element

3. Code snippet that runs after an event is triggered

4. Define the source file and line number of the binding function (limited to WebKit and opera browsers only)

In addition to being useful for debugging your own code, Visual event can also be used as a teaching tool to show how many websites have been launched.

Visual event is open source software (GPLV2) and has a git repository directory on GitHub for you to submit or modify as you wish

Installation

Because visual event is a small bookmark, it is easy to install and run it on any Web page:

1. Drag and drop the "visual event" link on the right to your Bookmarks bar: Visual event

2. Load a Web page that uses a JS library that the browser can support

3. Click "Visual Event" in the bookmarks Bar

4. View event handlers that are bound on document elements

An example of an automatically loaded visual event is provided here. This example uses data tables to create a test page with a number of events bound to different elements.

How it works

There is no standard way to recommend a DOM interface that discovers specific elements that bind events. Although this seems to be an oversight, there is a suggested way to include the eventlistenerlist attribute of the Level 3 DOM specification, but unfortunately, this method was removed in later drafts. Therefore, we have to look at independent JavaScript libraries that can normally maintain a cache of events (so they can be removed later and perform other useful abstractions).

Therefore, Visual event, in order to display events, must be able to parse the event information from the JS library. The libraries currently supported by visual event are as follows:

• DOM 0 Events
• JQuery 1.2+
• YUI 2
• MooTools 1.2+
• Prototype 1.6+
• Glow
• ExtJS 4.0.x

How to participate

Visual event is an open source software that can be obtained under the GPLV2 certificate. Open source control via Git, and the project has a Web page on GitHub. In fact any suggestions that help with the improvement of visual event are very popular! If you have any problems, please start your discussion on GitHub (issue), including the URL of the page where the problem occurred. The fork Code and the merge branch (pull request) are also encouraged!

You may have a very interesting place to add support for additional JavaScript libraries. The key is to be able to get the event cache used by the library, because there is no event cache to know which node has events and binding code.

The Visualevent class has a static array called "Visualevent.parsers", which is an array of functions--to add a new parser, simply add your function to the array. This function must return an array of JavaScript objects with the following parameters:

Establish Visual Event

In order to be able to run a local copy of visual event, you must first create a visual event, because this process will have file cascade operations to move the parser in the library to the main file. The setup process also establishes the JSDoc document and compresses the JS file (unless it is generated by debugging).

In order to establish visual Event, you only need a system that can run the Bash script and enter the "./build sh Debug" command at the terminal. This creates a new directory in the "builds" directory in the directory where the visual event and the correct loader are built (note that timestamps are used to prevent boolmarklet cache problems during development and deployment). The following is an example of the use of the script to build the process:

The file "Bookmarklethtml" is designed to make it easy for you to build your own bookmark loader. Usually you only need to change the path address of the bookmark. The link will be updated every time you press the key, you just need to install it as you would any other bookmark plugin.

Reprint: http://www.360docs.net/doc/info-bda8c890f78a6529647d53ea.html

Chrome Plugin Visual event to view a weapon for DOM element binding events