Tôi mới làm quen với JavaScript / jQuery và tôi đang học cách tạo các hàm. Rất nhiều hàm đã được cắt xén với (e) trong ngoặc. Hãy để tôi cho bạn thấy ý tôi:
$(this).click(function(e) {
// does something
});Có vẻ như hàm thậm chí không sử dụng giá trị của (e), vậy tại sao nó lại ở đó thường xuyên như vậy?
Câu trả lời:
elà tham chiếu var ngắn cho eventđối tượng sẽ được chuyển đến các trình xử lý sự kiện.
Đối tượng sự kiện về cơ bản có rất nhiều phương thức và thuộc tính thú vị có thể được sử dụng trong trình xử lý sự kiện.
Trong ví dụ bạn đã đăng là một trình xử lý nhấp chuột là một MouseEvent
$(<element selector>).click(function(e) {
// does something
alert(e.type); //will return you click
}DEMO - Sự kiện chuột DEMO sử dụnge.whichvàe.type
Một số tài liệu tham khảo hữu ích:
http://api.jquery.com/category/events/
http://www.quirksmode.org/js/events_properties.html
http://www.javascriptkit.com/jsref/event.shtml
KHUYẾN CÁO: Đây là câu trả lời rất muộn cho bài đăng cụ thể này nhưng khi tôi đã đọc qua nhiều câu trả lời khác nhau cho câu hỏi này, tôi nhận ra rằng hầu hết các câu trả lời đều sử dụng thuật ngữ mà chỉ những lập trình viên có kinh nghiệm mới hiểu được. Câu trả lời này là một nỗ lực để giải quyết câu hỏi ban đầu với một khán giả mới làm quen.
Điều nhỏ ' (e) ' thực sự là một phần của phạm vi rộng hơn của một thứ gì đó trong Javascript được gọi là một hàm xử lý sự kiện. Mọi hàm xử lý sự kiện đều nhận một đối tượng sự kiện. Với mục đích của cuộc thảo luận này, hãy nghĩ về một đối tượng như một "thứ" chứa một loạt các thuộc tính ( biến ) và phương thức ( hàm ), giống như các đối tượng trong các ngôn ngữ khác. Tay cầm, chữ ' e ' bên trong thứ (e) nhỏ , giống như một biến cho phép bạn tương tác với đối tượng (và tôi sử dụng thuật ngữ biến RẤT lỏng lẻo).
Hãy xem xét các ví dụ jQuery sau:
$("#someLink").on("click", function(e){ // My preferred method
e.preventDefault();
});
$("#someLink").click(function(e){ // Some use this method too
e.preventDefault();
});Chuyện gì đang xảy ra vậy?
Khi người dùng nhấp vào phần tử có id "#someLink" (có thể là một thẻ liên kết), hãy gọi một hàm ẩn danh, "function (e)" và gán đối tượng kết quả cho một trình xử lý, "e" . Bây giờ lấy trình xử lý đó và gọi một trong các phương thức của nó, "e.preventDefault ()" , sẽ ngăn trình duyệt thực hiện hành động mặc định cho phần tử đó.
Lưu ý: Tay cầm có thể được đặt tên bất kỳ thứ gì bạn muốn (ví dụ: ' function (billybob) '). Chữ 'e' là viết tắt của 'event', có vẻ khá tiêu chuẩn cho loại chức năng này.
Mặc dù 'e.preventDefault ()' có lẽ là cách sử dụng phổ biến nhất của trình xử lý sự kiện, bản thân đối tượng chứa nhiều thuộc tính và phương thức có thể được truy cập thông qua trình xử lý sự kiện.
Một số thông tin thực sự tốt về chủ đề này có thể được tìm thấy tại trang web học tập của jQuery, http://learn.jquery.com . Đặc biệt chú ý đến phần Sử dụng jQuery Core và Sự kiện .
ekhông có bất kỳ ý nghĩa đặc biệt nào. Nó chỉ là một quy ước để sử dụng elàm tên tham số hàm khi tham số là event.
Nó có thể
$(this).click(function(loremipsumdolorsitamet) {
// does something
}cũng.
Trong ví dụ đó, echỉ là một tham số cho hàm đó, nhưng nó là eventđối tượng được truyền qua nó.
Đối esố là viết tắt của đối tượng sự kiện. Ví dụ: bạn có thể muốn tạo mã cho các neo hủy bỏ hành động mặc định. Để làm điều này, bạn sẽ viết một cái gì đó như:
$('a').click(function(e) {
e.preventDefault();
}Điều này có nghĩa là khi một <a>thẻ được nhấp vào, hãy ngăn chặn hành động mặc định của sự kiện nhấp chuột.
Mặc dù bạn có thể thấy nó thường xuyên, nhưng nó không phải là thứ bạn phải sử dụng trong hàm mặc dù bạn đã chỉ định nó làm đối số.
Trong jQuery eviết tắt của event, đối tượng sự kiện hiện tại. Nó thường được truyền dưới dạng tham số cho hàm sự kiện được kích hoạt.
Demo: Sự kiện jQuery
Trong bản demo tôi đã sử dụng e
$("img").on("click dblclick mouseover mouseout",function(e){
$("h1").html("Event: " + e.type);
}); Tôi cũng có thể đã sử dụng event
$("img").on("click dblclick mouseover mouseout",function(event){
$("h1").html("Event: " + event.type);
}); Điều tương tự!
Các lập trình viên lười biếng, chúng tôi sử dụng rất nhiều tốc ký, một phần nó làm giảm công việc của chúng tôi, một phần là giúp dễ đọc. Hiểu được điều đó sẽ giúp bạn hiểu được tâm lý của việc viết mã.
Hôm nay tôi vừa viết một bài về "Tại sao chúng ta sử dụng các ký tự như" e "trong e.preventDefault ()?" và tôi nghĩ câu trả lời của tôi sẽ có ý nghĩa ...
Đầu tiên, chúng ta hãy xem cú pháp của addEventListener
Thông thường nó sẽ là: target.addEventListener (type, listening [, useCapture]);
Và định nghĩa các tham số của addEventlistener là:
gõ： Một chuỗi đại diện cho loại sự kiện để lắng nghe.
Listener： Đối tượng nhận thông báo (một đối tượng triển khai giao diện Sự kiện) khi một sự kiện thuộc loại được chỉ định xảy ra. Đây phải là một đối tượng triển khai giao diện EventListener hoặc một hàm JavaScript.
(Từ MDN)
Nhưng tôi nghĩ có một điều cần lưu ý: Khi bạn sử dụng hàm Javascript làm trình lắng nghe, đối tượng triển khai giao diện Sự kiện (sự kiện đối tượng) sẽ được tự động gán cho "tham số đầu tiên" của hàm. Vì vậy, nếu bạn sử dụng function (e), đối tượng sẽ được gán cho "e" vì "e" là tham số duy nhất của hàm (mặc định là tham số đầu tiên!), sau đó bạn có thể sử dụng e.preventDefault để ngăn chặn điều gì đó ....
chúng ta hãy thử ví dụ dưới đây:
<p>Please click on the checkbox control.</p>
<form>
<label for="id-checkbox">Checkbox</label>
<input type="checkbox" id="id-checkbox"/>
</div>
</form>
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
//var e=3;
var v=5;
var t=e+v;
console.log(t);
e.preventDefault();
}, false);
</script>kết quả sẽ là: [object MouseEvent] 5 và bạn sẽ ngăn chặn sự kiện nhấp chuột.
nhưng nếu bạn xóa dấu bình luận như:
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
var e=3;
var v=5;
var t=e+v;
console.log(t);
e.preventDefault();
}, false);
</script>bạn sẽ nhận được: 8 và lỗi : "Uncaught TypeError: e.preventDefault không phải là một hàm tại HTMLInputElement. (VM409: 69)".
Chắc chắn, sự kiện nhấp chuột sẽ không bị ngăn chặn lần này vì "e" đã được định nghĩa lại trong hàm.
Tuy nhiên, nếu bạn thay đổi mã thành:
<script>
document.querySelector("#id-checkbox").addEventListener("click", function(e,v){
var e=3;
var v=5;
var t=e+v;
console.log(t);
event.preventDefault();
}, false);
</script>mọi thứ sẽ hoạt động bình thường trở lại ... bạn sẽ nhận được 8 và sự kiện nhấp chuột bị ngăn chặn ...
Do đó, "e" chỉ là một tham số của hàm của bạn và bạn cần một "e" trong hàm you () để nhận "đối tượng sự kiện" sau đó thực hiện e.preventDefault (). Đây cũng là lý do tại sao bạn có thể thay đổi chữ "e" thành bất kỳ từ nào không được bảo lưu bởi js.
$(this).click(function(e) {
// does something
});Tham chiếu đến đoạn mã trên
$(this)là phần tử như một số biến.
clicklà sự kiện cần được thực hiện.
tham số eđược tự động chuyển từ js đến hàm của bạn, hàm này giữ giá trị của $(this)giá trị và có thể được sử dụng thêm trong mã của bạn để thực hiện một số thao tác.