Javascript đặt chức năng onclick với các tham số

Sự cố này xảy ra với trình xử lý sự kiện và trong các tình huống khác, chẳng hạn như khi thêm phương thức vào đối tượng. Hầu hết các tác giả Web lần đầu tiên gặp phải nó với các trình xử lý sự kiện, vì vậy đó là điều mà bài viết này sẽ tập trung vào, nhưng bạn nên lưu ý rằng nó cũng áp dụng cho các tình huống khác.

Trong JavaScript, dù sử dụng trình xử lý sự kiện truyền thống hay sự kiện DOM, trình xử lý sự kiện đều được gắn vào đối tượng liên quan của chúng dưới dạng tham chiếu đến hàm. Trong các trình duyệt tuân thủ tiêu chuẩn, khi sự kiện kích hoạt, hàm được thực thi như một phương thức của đối tượng và được truyền một tham số duy nhất; . Trong Internet Explorer 8- [hoặc 9 ở chế độ quirks], nó hoàn toàn không được truyền bất kỳ tham số nào

function myhandler[e] {
  ...
}
mydiv. title = myhandler;
mydiv2.addEventListener[ 'click', myhandler, false ];

Có nhiều trường hợp mong muốn chuyển một biến cục bộ cho hàm xử lý. Một ví dụ sẽ là khi lặp qua một danh sách các phần tử và gán cùng một trình xử lý sự kiện cho từng phần tử, nhưng cần chuyển một mã định danh duy nhất cho mỗi trình xử lý để nó luôn có thể tham chiếu chỉ mục của phần tử trong một bộ sưu tập. Bạn cũng có thể muốn truyền một đối tượng, không chỉ một chỉ mục. Có lẽ đây sẽ là một tham chiếu đến một yếu tố khác có liên quan đến trình xử lý

Mong muốn rõ ràng là thử một cái gì đó như thế này

mydiv. title = myhandler[i,myobject];

Tuy nhiên, điều này không làm việc. Những gì nó sẽ làm là ngay lập tức thực thi trình xử lý như một hàm bình thường, truyền cho nó các biến. Sau đó, bất cứ thứ gì hàm trả về, ngay cả khi đó là một chuỗi hoặc có lẽ không có gì cả, được gán làm thuộc tính của phần tử có tên của trình xử lý sự kiện. Rõ ràng điều này sẽ không hoạt động chính xác như một trình xử lý sự kiện

Có ba cách chính để khắc phục vấn đề. Hai cái đầu tiên là phổ biến nhất, nhưng có những hạn chế. Thứ ba là một trong những giải pháp hoàn chỉnh nhất, nhưng không phổ biến lắm. Tất cả các cuộc biểu tình đều được chuẩn bị với giả định thuật toán ví dụ sau

Trong ví dụ đó, trình xử lý sự kiện được thực thi trong phạm vi của hàm bên ngoài, do đó, paras, spans và i đều được giữ nguyên. Tuy nhiên, chúng sẽ có các giá trị mà chúng có trong phạm vi đó tại thời điểm trình xử lý được thực thi, không phải các giá trị chúng có tại thời điểm thực hiện nhiệm vụ. Điều này có nghĩa là [ngoại trừ trong những trường hợp cực kỳ hiếm khi trình xử lý sự kiện được thực thi trước khi kết thúc vòng lặp], tôi sẽ giữ giá trị của paras. chiều dài và không phải giá trị chúng ta cần

Các giải pháp là

Sử dụng Hàm tạo

Đây là cách tiếp cận hạn chế và có nhiều vấn đề nhất, nhưng lại được sử dụng phổ biến nhất - thường là do tác giả không nhận thức được các lựa chọn thay thế hoặc lợi thế của chúng. Ý tưởng là viết mã hàm dưới dạng một chuỗi, với các biến cục bộ được thêm vào chuỗi. Khi trình xử lý sự kiện chạy, nó được đánh giá trong phạm vi hiện tại [không phải phạm vi mà nó được tạo ra]. Các vấn đề với cách tiếp cận này là rất nhiều

• Nó có hiệu suất rất kém. Điều này xuất phát từ việc chuyển đổi từ chuỗi thành mã được thực thi [tương tự như eval] và việc tạo ra nhiều chức năng mà công cụ JavaScript không thể tối ưu hóa thành một chức năng được lưu trữ duy nhất
• Biến phạm vi cục bộ bị mất. Trong trường hợp này, điều đó có nghĩa là biến span không còn tồn tại
• Nó chỉ có thể chuyển các ký tự [chuỗi, số, booleans, mẫu biểu thức chính quy, null] chứ không phải đối tượng hoặc mảng trực tiếp vào mã. Chúng có thể được tham chiếu theo tên nhưng chỉ khi chúng có sẵn trong phạm vi toàn cầu hoặc phạm vi mà trình xử lý sự kiện sẽ được thực thi trong

Điều này có nghĩa là mặc dù có thể chuyển i vào mã chức năng, các nhịp sẽ cần phải được tạo thành toàn cầu và các phần tử trong đó được tham chiếu bằng cách sử dụng chỉ mục i như một phần của mã chức năng

var spans;
function myfunction[] {
  var paras = document.getElementsByTagName['p'];
  spans = document.getElementsByTagName['span'];
  for[ var i = 0; i < paras.length; i++ ] {
    paras[i]. title = new Function[
      'var a = '+i+', b;\n'+
      'b = spans[a];\n'+
      '.. etc.'
    ];
  }
}
...
myfunction[];

Lưu ý rằng các đối tượng được trả về bởi getElementsByTagName là động, vì vậy nếu số lượng span thay đổi giữa việc tạo và chạy trình xử lý sự kiện, thì đối tượng span sẽ được cập nhật và chỉ mục sẽ không hoạt động

Gán biến làm thuộc tính của phần tử

Ý tưởng cho phương pháp này là lưu trữ tất cả các biến cần thiết làm thuộc tính của phần tử phát hiện sự kiện. Sau đó, khi hàm được thực thi, nó có thể tìm các thuộc tính này trên phần tử, được tham chiếu bằng từ khóa 'this'

Cách tiếp cận này hoạt động tốt trong hầu hết các tình huống, nhưng có thể có vấn đề. Ví dụ: giả sử bạn muốn sử dụng cùng một chức năng nhiều lần, gắn nó làm trình xử lý trên cùng một phần tử cho nhiều sự kiện, trong đó mỗi sự kiện mong đợi các biến khác nhau khả dụng. Có thể giải quyết vấn đề này, nhưng nó có thể trở nên lộn xộn. Nếu sử dụng điều này, điều quan trọng là đảm bảo rằng các tên biến đã chọn sẽ không bao giờ được sử dụng bởi bất kỳ trình duyệt nào như một phần của thuộc tính DOM cho phần tử đó. Điều này cũng tăng thêm trọng lượng cho các đối tượng phần tử và không phải là cách tiếp cận rõ ràng nhất, nhưng nó hoạt động

function myfunction[] {
  var paras = document.getElementsByTagName['p'];
  var spans = document.getElementsByTagName['span'];
  for[ var i = 0; i < paras.length; i++ ] {
    paras[i].originalindex = i;
    paras[i].relatedspan = spans[i];
    paras[i]. title = function [e] {
      var a = this.originalindex, b = this.relatedspan;
      .. etc.
    };
  }
}
...
myfunction[];

Vì điều này thực thi trình xử lý sự kiện trong phạm vi cục bộ, nên cũng có thể tham chiếu khoảng bằng cách sử dụng

b = spans[this.originalindex];

Lưu ý rằng một lần nữa, các đối tượng được trả về bởi getElementsByTagName là động, vì vậy nếu số lượng span thay đổi giữa việc tạo và chạy trình xử lý sự kiện, thì đối tượng span sẽ được cập nhật và chỉ mục sẽ không hoạt động

Sử dụng phạm vi để ghi nhớ các thể hiện của biến cục bộ

Đây là cách tiếp cận hoàn chỉnh và tiên tiến nhất, giải quyết được tất cả các vấn đề do các kỹ thuật khác gây ra. Ý tưởng là dựa trên sai lầm ban đầu khi thực thi một chức năng và sử dụng điều đó để tạo lợi thế cho chúng tôi. Làm cho nó chạy một chức năng, truyền cho nó các tham số. Hàm đó trả về một hàm khác tồn tại bên trong nó, trong phạm vi cục bộ của nó. Điều này trở thành trình xử lý sự kiện khi nó được chỉ định và được thực thi bên trong phạm vi cục bộ của hàm bên ngoài, với các biến cục bộ được truyền cho nó được bảo toàn trong phạm vi đó. Điều này được gọi là 'đóng cửa'

Vấn đề chính với phương pháp này là sự thiếu hiểu biết của nó, do một số tác giả không biết về nó và có thể bị nhầm lẫn bởi những gì mã đang cố gắng thực hiện. Bạn luôn có thể để lại nhận xét trong mã của mình để chỉ họ đến bài viết này. Nếu bản thân bạn gặp khó khăn trong việc hiểu nó, tôi khuyên bạn nên xem phần , nơi tôi mô tả cách hoạt động của các phạm vi như thế này

Ngoài ra còn có một điểm là chức năng xử lý và phạm vi liên quan đến nó được bảo tồn vô thời hạn và có thể sử dụng hết bộ nhớ. Tuy nhiên, điều này không tệ hơn các lựa chọn thay thế khác, cũng có thể giữ một số lượng lớn các biến vô thời hạn. Bạn luôn có thể xóa trình xử lý sau khi hoàn thành với chúng, điều này sẽ cho phép trình thu gom rác giải phóng bộ nhớ mà chúng đã sử dụng

Nếu bạn không muốn sử dụng một chức năng bên ngoài, bạn cũng có thể xác định nội tuyến chức năng bảo toàn phạm vi và thực hiện nó ngay lập tức. Điều này có thêm ưu điểm là nó bảo toàn phạm vi của hàm chính [hàm của tôi trong các ví dụ] cũng như các phạm vi bên trong, nhưng có nhược điểm là nó trở nên khó hiểu hơn đối với người khác

Làm cách nào để truyền tham số trong hàm title trong JavaScript?

Nhiệm vụ là chuyển một chuỗi dưới dạng tham số trên hàm onClick bằng javascript, chúng ta sẽ thảo luận về một số kỹ thuật. .
ví dụ 1. Ví dụ này chỉ cần đặt đối số là chuỗi trong thuộc tính onClick của nút gọi hàm có chuỗi làm đối số bằng phương thức onClick[]
đầu ra

Làm cách nào để sử dụng chức năng title trong JavaScript?

Sự kiện title .
Ví dụ. Thực thi JavaScript khi nhấp vào nút. .
In HTML: .
Click a to display the date: .. .
Click a
element to change the text color: .. .
Một ví dụ khác về cách thay đổi màu của một phần tử. .
Nhấp để sao chép văn bản từ trường nhập liệu này sang trường nhập liệu khác

Làm cách nào để gọi hàm JavaScript có tham số trong HTML?

Gọi hàm bằng tệp JavaScript bên ngoài . Để đưa tệp JavaScript của chúng ta vào tài liệu HTML, chúng ta phải sử dụng thẻ script .

Sự khác biệt giữa hàm title ={ [] => hàm []} và hàm title là gì?

Sự khác biệt là cái đầu tiên có dấu ngoặc đơn và cái thứ hai thì không .