Home PC Games Linux Windows Database Network Programming Server Mobile  
  Home \ Programming \ Acting on JavaScript events     - Examples of RAID levels and achieve Operational Details (Linux)

- C language preprocessor command (Programming)

- Linux kernel source code analysis (Linux)

- To upgrade combat MongoDB database replication sets and split versions (Database)

- Ubuntu 14.04 install Sublime Text 3 plug and use SublimeClang (Linux)

- Recent Consolidation Using Linux security module (Linux)

- Linux cd command Detailed (Linux)

- C # mobile side and PC-side data exchange (Database)

- Binary tree traversal: the first sequence in order preorder recursive and non-recursive and traversal sequence (Programming)

- KVM usb passthrough configuration (Linux)

- How to install CentOS 7.x in OpenERP (Odoo) (Linux)

- Python Multithreaded Programming (Programming)

- Security measures under Unix multi-user operating system (Linux)

- How do you prevent other users from accessing your home directory in Linux (Linux)

- Introduces Linux kernel compilation system and compiler installation (Linux)

- Executable file format Explanation under Linux (Linux)

- About Leetcode on Binary Tree Algorithm summary (Programming)

- Java concurrent programming using the synchronized keyword ReentrantLock alternative primitive (Programming)

- U disk to install Windows and Ubuntu 15.04 dual system (Programming)

- Execute command sentence can result in equipment permanently bricked in Linux laptop (Linux)

  Acting on JavaScript events
  Add Date : 2016-07-27      
  Today interview a company Web front-end development positions in front of the questions answered are still live together, and asked what to do when an interview yesterday array of problem-solving ideas to weight problems. Fortunately, a few days ago specifically seen this problem, when the answer can easily cope ah), because they have previously been studied, so it is not too difficult to answer. However, the final code for the interviewer and out of a problem let me pose a rose. Title itself is very simple: a ul li in a thousand, one thousand li how to give it to bind a mouse click event when the mouse is clicked alert the xy position coordinates of the content and li li's,

< Ul id = "ulItem">

    < Li id = "li1"> 1 < / li>

    < Li id = "li2"> 2 < / li>

    < Li id = "li3"> 3 < / li>


    < Li id = "li1000"> 1000 < / li>

We need to consider browser compatibility, event bubbling, efficiency and other issues. I see the problem directly on the paper wrote the following answer:

var ulItem = document.getElementById ( "ulItem");
var lis = document.getElementsByTagName ( "li");
for (var i = 0; i     lis [i] .onclick = function () {
        alert ( "Content:" + this.innerHTML);
        alert ( "Location:" + getElementPosition (this) .x + "," + getElementPosition (this) .y;
function getElementPosition (e) {
    var x = 0, y = 0;
    while (e! = null) {
        x + = e.offsetLeft;
        y + = e.offsetTop;
        e = e.offsetParent;
Return {x: x, y: y};

Finished looked again I feel no need to consider compatibility, event bubbling ah. Efficiency, then thought, could not think of how improved, so the interviewer to read. The interviewer also very good, he said after reading: You did not consider me focus ah, so you add a click event 1000 cycles is inefficient. Then told me use event bubbling features to improve efficiency, that event broker (ps: before doing the project has encountered to stop event bubbling time, but take advantage of event bubbling characteristics are improved efficiency are still not completely know). After listening to the interviewer speak up position, and he came back and checked the Internet a bit, now has his own record and then summarize their own learning process as it:

Acting event (Event Delegation), also known as the event delegate. JavaScript is commonly used techniques commonly used in the binding event. As the name suggests, "the event broker" that is required to bind the event originally entrusted to the parent element, the parent element so that the event served as listening posts.

Why should I do? As we all know, DOM operations are very consume performance, it is simply repeating event binding performance killer. The core idea of ​​the event broker is bound by as little as possible, as much as possible to monitor the event. Program ape thing, the code did not say the J8, posted the following codes:

var ulItem = document.getElementById ( "ulItem");
ulItem.onclick = function (e) {
    e = e || window.event; // this line and the next line is to be compatible with IE8 and earlier versions
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase () === "li") {
        alert (target.innerHTML);
        alert ( "position:" + getElementPosition (target) .x + "," + getElementPosition (target) .y);
function getElementPosition (e) {
    var x = 0, y = 0;
    while (e! = null) {
        x + = e.offsetLeft;
        y + = e.offsetTop;
        e = e.offsetParent;
return {x: x, y: y};

Ah, now the code removed for circulation, improve efficiency, but also with processing compatibility, feel the answer should be all right. The above said is, to a pen questions, the following would no longer talk about the spirit of academic thinking event broker:

In the traditional event processing, you add or delete event handlers as needed for each element. However, the event handler will likely cause a memory leak, or performance degradation - the more you use, the greater the risk. JavaScript event broker is a simple technique through which you can add an event handler to a parent element, thus avoiding the event handler is added to the plurality of sub-level elements. Event broker uses two events in JavaSciprt often overlooked features: event bubbling and target elements. When an event is triggered on an element, such as a mouse click on a button, the same event will be triggered at all ancestor elements of that element. This process is called event bubbling; this event from the original element start bubbling to the DOM tree top. The elements of a target element in any event is the beginning, in our case this is the button, and it is our event object in the form of property. Use event agency, we can add an event handler to an element, it waits for an event from bubbling up in the child element, and can be learned from this event which element began.

About the event broker, today is the first contact on the first write this now.
- Installation salt-minion on RHEL5 (Linux)
- Use chattr and lsattr command to manage linux files and directory attributes (Linux)
- How to use the Docker Machine cluster deployment Swarm (Server)
- Android HTTP request with Get Information (Programming)
- Ceph tuning --Journal and tcmalloc (Server)
- Grep how to find files based on file contents in UNIX (Linux)
- Use web2py + uWSGI + Nginx Web server built on Linux (Server)
- Chkconfig command Detailed service is added and shut down the system in two ways to start service under Linux (Linux)
- The difference between free command displays the buffers and cache (Linux)
- Android memory optimization of the optimal load Bitmap (Linux)
- sa weak passwords intrusion prevention (Linux)
- Android Notification (Programming)
- Linux memory Cache Analysis (Linux)
- EXP-00091: Exporting questionable statistics Processing Method (Database)
- Windows Desktop use VNC remote connect Linux (Linux)
- Overall Physical Migration of Oracle Database with (Database)
- Learning UNIX good habits (Linux)
- How to identify memory leaks in Java (Programming)
- Use Linux firewall camouflage defense hacked (Linux)
- The source code compiler installation Nginx 1.8.0 under Ubuntu 14.10 (Server)
  CopyRight 2002-2020 newfreesoft.com, All Rights Reserved.