Trình xử lý sự kiện Javascript với các tham số

Tôi muốn tạo một eventHandler truyền sự kiện và một số tham số. Vấn đề là hàm không nhận được phần tử. Đây là một ví dụ:

doClick = function(func){
    var elem = .. // the element where it is all about
    elem.onclick = function(e){
        func(e, elem);
    }
}
doClick(function(e, element){
    // do stuff with element and the event
});

'Elem' phải được xác định bên ngoài chức năng ẩn danh. Làm cách nào để lấy phần tử đã qua để sử dụng trong hàm ẩn danh? Có cách nào để làm việc này không?

Còn addEventListener thì sao? Tôi dường như không thể vượt qua sự kiện thông qua addEventListener phải không?

Cập nhật

Tôi dường như đã khắc phục được sự cố với 'cái này'

doClick = function(func){
    var that = this;
    this.element.onclick = function(e){
        func(e, that);
    }
}

Nơi chứa this.element mà tôi có thể truy cập trong hàm.

AddEventListener

Nhưng tôi đang thắc mắc về addEventListener:

function doClick(elem, func){
    element.addEventListener('click', func(event, elem), false);
}

Tôi không hiểu chính xác mã của bạn đang cố gắng làm gì, nhưng bạn có thể cung cấp các biến trong bất kỳ trình xử lý sự kiện nào bằng cách sử dụng các ưu điểm của đóng hàm:

function addClickHandler(elem, arg1, arg2) {
    elem.addEventListener('click', function(e) {
        // in the event handler function here, you can directly refer
        // to arg1 and arg2 from the parent function arguments
    }, false);
}

Tùy thuộc vào tình huống mã hóa chính xác của bạn, bạn luôn có thể thực hiện một số loại đóng để bảo toàn quyền truy cập vào các biến cho bạn.

Từ nhận xét của bạn, nếu những gì bạn đang cố gắng hoàn thành là:

element.addEventListener('click', func(event, this.elements[i]))

Sau đó, bạn có thể thực hiện việc này với một hàm tự thực thi (IIFE) nắm bắt các đối số bạn muốn trong một bao đóng khi nó thực thi và trả về hàm xử lý sự kiện thực tế:

element.addEventListener('click', (function(passedInElement) {
    return function(e) {func(e, passedInElement); };
}) (this.elements[i]), false);

Để biết thêm thông tin về cách hoạt động của IIFE, hãy xem các tài liệu tham khảo khác sau:

Mã gói Javascript bên trong hàm ẩn danh

Biểu thức hàm được gọi ngay lập tức (IIFE) Trong JavaScript - Truyền jQuery

Các trường hợp sử dụng tốt cho JavaScript tự thực thi các hàm ẩn danh là gì?

Phiên bản cuối cùng này có lẽ dễ dàng hơn để xem những gì nó đang làm như thế này:

// return our event handler while capturing an argument in the closure
function handleEvent(passedInElement) {
    return function(e) {
        func(e, passedInElement); 
    };
}

element.addEventListener('click', handleEvent(this.elements[i]));

Nó cũng có thể sử dụng .bind()để thêm các đối số vào một cuộc gọi lại. Bất kỳ đối số nào bạn chuyển đến .bind()sẽ được thêm vào trước các đối số mà chính lệnh gọi lại sẽ có. Vì vậy, bạn có thể làm điều này:

elem.addEventListener('click', function(a1, a2, e) {
    // inside the event handler, you have access to both your arguments
    // and the event object that the event handler passes
}.bind(elem, arg1, arg2));

Đó là một câu hỏi cũ nhưng là một câu hỏi phổ biến. Vì vậy, hãy để tôi thêm cái này ở đây.

Với cú pháp hàm mũi tên, bạn có thể đạt được nó theo cách ngắn gọn hơn vì nó được liên kết từ vựng và có thể được xâu chuỗi.

Biểu thức hàm mũi tên là một thay thế nhỏ gọn về mặt cú pháp cho biểu thức hàm thông thường, mặc dù không có các ràng buộc riêng với các từ khóa this, đối số, super hoặc new.target.

const event_handler = (event, arg) => console.log(event, arg);
el.addEventListener('click', (event) => event_handler(event, 'An argument'));

Nếu bạn cần xóa trình lắng nghe sự kiện:

// Let's use use good old function sytax
function event_handler(event, arg) {
  console.log(event, arg);
}

// Assign the listener callback to a variable
var doClick = (event) => event_handler(event, 'An argument'); 

el.addEventListener('click', doClick);

// Do some work...

// Then later in the code, clean up
el.removeEventListener('click', doClick);

Đây là một lớp lót điên rồ:

// You can replace console.log with some other callback function
el.addEventListener('click', (event) => ((arg) => console.log(event, arg))('An argument'));

Phiên bản ngoan ngoãn hơn : Thích hợp hơn cho bất kỳ công việc lành mạnh nào.

el.addEventListener('click', (event) => ((arg) => {
  console.log(event, arg);
})('An argument'));

Một cái gì đó bạn có thể thử là sử dụng phương thức ràng buộc, tôi nghĩ rằng điều này đạt được những gì bạn yêu cầu. Nếu không có gì khác, nó vẫn rất hữu ích.

function doClick(elem, func) {
  var diffElem = document.getElementById('some_element'); //could be the same or different element than the element in the doClick argument
  diffElem.addEventListener('click', func.bind(diffElem, elem))
}

function clickEvent(elem, evt) {
  console.log(this);
  console.log(elem); 
  // 'this' and elem can be the same thing if the first parameter 
  // of the bind method is the element the event is being attached to from the argument passed to doClick
  console.log(evt);
}

var elem = document.getElementById('elem_to_do_stuff_with');
doClick(elem, clickEvent);

Với bản cập nhật cho câu hỏi ban đầu, có vẻ như có sự cố với ngữ cảnh ("this") khi chuyển các trình xử lý sự kiện. Những điều cơ bản được giải thích, ví dụ tại đây http://www.w3schools.com/js/js_ Chức năng_invocation.asp

Một phiên bản làm việc đơn giản của ví dụ của bạn có thể đọc

var doClick = function(event, additionalParameter){
    // do stuff with event and this being the triggering event and caller
}

element.addEventListener('click', function(event)
{
  var additionalParameter = ...;
  doClick.call(this, event, additionalParameter );
}, false);

Xem thêm Javascript call () & apply () vs bind ()?

Câu trả lời ngắn:

x.addEventListener("click", function(e){myfunction(e, param1, param2)});

... 

function myfunction(e, param1, param1) {
    ... 
} 

thisbên trong doThingslà đối tượng cửa sổ. Hãy thử cái này thay thế:

var doThings = function (element) {
    var eventHandler = function(ev, func){
        if (element[ev] == undefined) {
            return;
        }

        element[ev] = function(e){
            func(e, element);
        }
    };

    return {
        eventHandler: eventHandler
    };
};

let obj = MyObject();

elem.someEvent( function(){ obj.func(param) } );

//calls the MyObject.func, passing the param.