“Cái này” trong JavaScript onclick là gì?

<a onclick="javascript:func(this)" >here</a>

Nghĩa là gì thistrong kịch bản?

Trong trường hợp bạn đang hỏi, thisđại diện cho phần tử HTML DOM.

Vì vậy, nó sẽ là <a>phần tử được nhấp vào.

Nó đề cập đến phần tử trong DOM chứa onclickthuộc tính:

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('there');
}
</script>
<a onclick="func(this)">here</a>

(Ví dụ này sử dụng jQuery .)

Giá trị của các thuộc tính xử lý sự kiện như onclick chỉ nên là JavaScript, không có bất kỳ tiền tố "javascript:" nào. Giao thức javascript: pseudo-protocol được sử dụng trong một URL, ví dụ:

<a href="javascript:func(this)">here</a>

onclick="func(this)"Mặc dù vậy, bạn nên sử dụng biểu mẫu này. Cũng lưu ý rằng trong ví dụ của tôi ở trên, sử dụng javascript: pseudo-protocol "this" sẽ tham chiếu đến đối tượng cửa sổ chứ không phải <a>phần tử.

Trong JavaScript thisđề cập đến phần tử chứa hành động. Ví dụ: nếu bạn có một hàm được gọi là hide():

function hide(element){
   element.style.display = 'none';
}

Gọi hidevới thissẽ ẩn phần tử. Nó chỉ trả về phần tử được nhấp, ngay cả khi nó tương tự với các phần tử khác trong DOM.

Ví dụ: bạn có thể thisnhấp vào một số trong HTML bên dưới sẽ chỉ ẩn dấu đầu dòng được nhấp.

<ul>
  <li class="bullet" onclick="hide(this);">1</li>
  <li class="bullet" onclick="hide(this);">2</li>
  <li class="bullet" onclick="hide(this);">3</li>
  <li class="bullet" onclick="hide(this);">4</li>
</ul>

Đây (đây) là một đối tượng chứa tất cả các tính năng / thuộc tính của phần tử dom. bạn có thể thấy bằng

console.log(this);

Điều này sẽ hiển thị tất cả các thuộc tính thuộc tính của phần tử dom với cấu trúc phân cấp. Bạn có thể thao tác phần tử dom bằng cách này.

Cũng mô tả trên liên kết dưới đây: -

http://www.quirksmode.org/js/this.html

từ khóa này trong sự kiện addEventListener

function getValue(o) {
  alert(o.innerHTML);
}

function hide(current) {
  current.setAttribute("style", "display: none");
}

var bullet = document.querySelectorAll(".bullet");

for (var x in bullet) { 
  bullet[x].onclick = function() {
    hide(this);
  };
};
 
/* Using dynamic DOM Event */
document.querySelector("#li").addEventListener("click", function() {
  getValue(this); /* this = document.querySelector("#li") Object */
});

li {
  cursor: pointer;
}

<ul>
  <li onclick="getValue(this);">A</li>
  <li id="li" >B</li>
  <hr />
  <li class="bullet" >1</li>
  <li class="bullet" >2</li>
  <li class="bullet" >3</li>
  <li class="bullet" >4</li>
</ul>

Khi gọi một hàm, từ "this" là một tham chiếu đến đối tượng đã gọi hàm.

Trong ví dụ của bạn, nó là một tham chiếu đến phần tử neo. Ở đầu kia, lệnh gọi hàm sau đó truy cập các biến thành viên của phần tử thông qua tham số đã được truyền.

thistham chiếu đến đối tượng mà onclickphương thức thuộc về. Vì vậy, bên trong func thissẽ là nút DOM của aphần tử và this.innerTextsẽ là here.