Hướng dẫn javascript onclick get element - javascript onclick get phần tử

Cách thực hiện mà không có JavaScript hoặc thư viện bên ngoài

Thông thường nên tránh JavaScript nội tuyến, nhưng hiếm khi có một ví dụ về cách làm điều đó.Đây là cách tôi gắn các sự kiện vào các nút.Tôi không hoàn toàn hài lòng với phương pháp được đề xuất được bao lâu được so sánh với thuộc tính onClick đơn giản.
Here is my way of attaching events to buttons.
I'm not entirely happy with how much longer the recommended method is compared to a simple onClick attribute.

Trình duyệt hiện đại

• Hoạt động trước khi tài liệu đã tải xong.
• Rất hiệu quả.
• Tách JS với HTML.
• JS đang ở trong

const OnEvent = [doc] => {
    return {
        on: [type, selector, callback] => {
            doc.addEventListener[type, [event]=>{
                if[!event.target.matches[selector]] return;
                callback.call[event.target, event];
            }, false];
        }
    }
};


OnEvent[document].on['click', '.btn', function [e] {
    let div = document.createElement["div"];
    div.innerHTML = "click " + e.target.id + "!";
    document.body.appendChild[div];
}];

Button 1
Button 2
Do nothing

Chỉ dành cho năm 2014

Button

let OnEvent = [doc] => {
    return {
        on: [event, className, callback] => {
            doc.addEventListener['click', [event]=>{
                if[!event.target.classList.contains[className]] return;
                callback.call[event.target, event];
            }, false];
        }
    }
};


OnEvent[document].on['click', 'btn', function [e] {
    window.console.log[this.id, e];
}];

Chỉ dành cho năm 2013

[function[doc]{
    var hasClass = function[el,className] {
        return el.classList.contains[className];
    }
    doc.addEventListener['click', function[e]{
      if[hasClass[e.target, 'click-me']]{
          e.preventDefault[];
          doSomething.call[e.target, e];
      }
    }];
}][document];

function insertHTML[str]{
  var s = document.getElementsByTagName['script'], lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML["beforebegin", str];
}

function doSomething[event]{
  console.log[this.id]; // this will be the clicked element
}







insertHTML['Button 1'];




Button 2



Button 4

Cross-browser

[function[doc]{
    var cb_addEventListener = function[obj, evt, fnc] {
        // W3C model
        if [obj.addEventListener] {
            obj.addEventListener[evt, fnc, false];
            return true;
        } 
        // Microsoft model
        else if [obj.attachEvent] {
            return obj.attachEvent['on' + evt, fnc];
        }
        // Browser don't support W3C or MSFT model, go on with traditional
        else {
            evt = 'on'+evt;
            if[typeof obj[evt] === 'function']{
                // Object already has a function on traditional
                // Let's wrap it with our own function inside another function
                fnc = [function[f1,f2]{
                    return function[]{
                        f1.apply[this,arguments];
                        f2.apply[this,arguments];
                    }
                }][obj[evt], fnc];
            }
            obj[evt] = fnc;
            return true;
        }
        return false;
    };
    var hasClass = function[el,className] {
        return [' ' + el.className + ' '].indexOf[' ' + className + ' '] > -1;
    }

    cb_addEventListener[doc, 'click', function[e]{
      if[hasClass[e.target, 'click-me']]{
          e.preventDefault ? e.preventDefault[] : e.returnValue = false;
          doSomething.call[e.target, e];
      }
    }];
}][document];

function insertHTML[str]{
  var s = document.getElementsByTagName['script'], lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML["beforebegin", str];
}

function doSomething[event]{
  console.log[this.id]; // this will be the clicked element
}







insertHTML['Button 1'];




Button 2



Button 4

Trình duyệt chéo với jQuery

[function[$]{
    $[document].on['click', '.click-me', function[e]{
      doSomething.call[this, e];
    }];
}][jQuery];

function insertHTML[str]{
  var s = document.getElementsByTagName['script'], lastScript = s[s.length-1];
  lastScript.insertAdjacentHTML["beforebegin", str];
}

function doSomething[event]{
  console.log[this.id]; // this will be the clicked element
}







insertHTML['Button 1'];




Button 2



Button 4

Bạn có thể chạy nó trước khi tài liệu đã sẵn sàng, nhấp vào các nút sẽ hoạt động vì chúng tôi đính kèm sự kiện vào tài liệu.

Dưới đây là một JSFiddle vì một số lý do lạ, chức năng insertHTML không hoạt động trong đó mặc dù nó hoạt động trong tất cả các trình duyệt của tôi.
For some strange reason the insertHTML function does not work in it even though it works in all my browsers.

Bạn luôn có thể thay thế insertHTML bằng

Button 1
Button 2
Do nothing

document.write['Button 1'];

Sources:

• Các lựa chọn thay thế cho Document.Write là gì?
• Kiểm tra xem một phần tử chứa một lớp trong javascript?
• sự kiện.PreventDefault [] Chức năng không hoạt động trong IE
• //gist.github.com/eduardocereto/955642