Memahami petua objects_javascript acara JavaScript

Apabila peristiwa pada DOM dicetuskan, peristiwa objek peristiwa akan dijana.

Objek acara dalam DOM

Pelayar yang serasi dengan DOM akan menghantar objek acara ke dalam pengendali acara. Objek acara mengandungi sifat dan kaedah yang berkaitan dengan acara khusus yang menciptanya. Jenis pembahagian acara adalah berbeza, dan kaedah atribut yang tersedia adalah berbeza. Walau bagaimanapun, semua acara akan mempunyai ahli yang disenaraikan dalam jadual di bawah.

Sifat yang ditakrifkan oleh standard acara DOM Tahap 2 disenaraikan di bawah:

• buih: Mengembalikan nilai Boolean yang menunjukkan sama ada acara itu jenis acara gelembung.
  
• boleh dibatalkan: Mengembalikan nilai Boolean yang menunjukkan sama ada acara itu boleh mempunyai tindakan lalai boleh dibatalkan.
  
• currentTarget: Mengembalikan elemen yang pendengar acaranya mencetuskan acara ini.
  
• eventPhase: Mengembalikan fasa semasa penyebaran acara.
  
• sasaran: Mengembalikan elemen yang mencetuskan acara ini (nod sasaran acara).
  
• timeStamp: Mengembalikan tarikh dan masa acara dijana.
  
• jenis: Mengembalikan nama acara yang diwakili oleh objek Acara semasa.
  

Disenaraikan di bawah ialah kaedah yang ditakrifkan oleh standard acara DOM Tahap 2. Model acara IE tidak menyokong kaedah ini:

• initEvent(): Mulakan sifat objek Acara yang baru dibuat.
• preventDefault(): Memaklumkan penyemak imbas supaya tidak melakukan tindakan lalai yang dikaitkan dengan acara tersebut.
• stopPropagation(): Tidak lagi menghantar acara.

ini, sasaran, Sasaran semasa

Di dalam pengendali acara, objek ini sentiasa sama dengan nilai currentTarget dan sasaran hanya mengandungi sasaran sebenar acara. Jika pengendali acara ditugaskan terus kepada elemen sasaran, ini, currentTarget dan sasaran mengandungi nilai yang sama. Seperti:

var btn = document.querySelector("#btn");
btn.onclick=function () {
  console.log(event.currentTarget === this); //true
  console.log(event.target === this); //true
}

Memandangkan sasaran acara klik ialah butang btn, ketiga-tiga nilai ini adalah sama. Jika pengendali acara berada dalam nod induk butang (document.body), maka nilai ini tidak sama. Seperti:

var btn = document.querySelector("#btn");
document.body.onclick=function () {
  console.log(event.currentTarget === document.body); //true
  console.log(this === document.body); //true
  console.log(event.target === btn); //true 因为btn没有注册事件处理程序，所以该click事件就冒泡到了document.body
}

Di sini, ini dan currentTarget adalah kedua-duanya document.body, kerana pengendali acara didaftarkan pada elemen ini. Tetapi elemen sasaran adalah sama dengan elemen butang kerana ia adalah sasaran sebenar acara klik. Memandangkan butang itu tidak mempunyai pengendali acara yang didaftarkan, acara klik muncul ke document.body, tempat acara itu boleh dikendalikan.

1. taip

Apabila anda perlu mengendalikan berbilang acara melalui satu fungsi, anda boleh menggunakan atribut jenis. Seperti:

//获取按钮
var btn = document.querySelector("#btn");
//设置多个事件
var handler = function() {
//检测事件的类型
  switch (event.type) {
    case "click":
      console.log("i click it");
      break;
    case "mouseover":
      console.log("i enter it");
      break;
    case "mouseout":
      console.log("i leave it");
      break;
  }
}
//给响应的事件赋值
btn.onclick = handler;
btn.onmouseover = handler;
btn.onmouseout = handler;

2. preventDefault()

Untuk mengelakkan tingkah laku lalai untuk acara tertentu, anda boleh menggunakan kaedah ini. Seperti:

var aTags = document.getElementsByTagName("a");
for (var i = 0; i < aTags.length; i++) {
  var currentATag = aTags[i];
  currentATag.onclick = function() {
    event.preventDefault();
  }
};

Kod di atas menyekat semua fungsi hiperpautan teg pada halaman web. Perlu diingat bahawa hanya peristiwa dengan atribut boleh dibatalkan ditetapkan kepada benar boleh menggunakan preventDefault() untuk membatalkan tingkah laku lalainya.

3. stopPropagation()

Segera hentikan penyebaran peristiwa dalam hierarki DOM, iaitu, batalkan tangkapan acara selanjutnya atau menggelegak. Contohnya, pengendali acara yang ditambahkan terus pada butang boleh memanggil kaedah ini untuk mengelakkan daripada mencetuskan pengendali acara yang didaftarkan pada document.body. Seperti:

var btn = document.getElementById("btn");
btn.onclick = function () {
  console.log("btn clicked");
  // event.stopPropagation();
};
window.onclick = function () {
  console.log("clicked");
};
//单击一下的结果：
//btn clicked
//clicked

Contoh lain:

var btn = document.getElementById("btn");
btn.onclick = function () {
  console.log("btn clicked");
  event.stopPropagation();
};
window.onclick = function () {
  console.log("clicked");
};
//单击一下的结果：
//btn clicked

eventPhase

Atribut ini digunakan untuk menentukan peringkat aliran acara yang sedang dilalui oleh acara itu.

• Jika ia adalah fasa tangkapan, ia bersamaan dengan 1
  
• Jika ia adalah peringkat objek sasaran, ia bersamaan dengan 2;
  
• Jika tahap menggelegak, ia bersamaan dengan 3
  

Contohnya:

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
  console.log("bodyListener" + event.eventPhase);
}, true) //捕获阶段

btn.onclick = function() {
  console.log("btn" + event.eventPhase);
} //目标对象阶段，实际上属于冒泡阶段（在btn上）

document.body.onclick = function() {
  console.log("body" + event.eventPhase);
} //冒泡阶段（在body上）

Contoh lain:

var btn = document.getElementById("btn");

document.body.addEventListener("click", function() {
  console.log(event.eventPhase); //1
  console.log(event.currentTarget); //HTMLBodyElement
}, true);

btn.addEventListener("click", function() {
  console.log(event.eventPhase); //2
  console.log(event.currentTarget); //HTMLInputElement
});

document.body.addEventListener("click", function() {
  console.log(event.eventPhase); //3
  console.log(event.currentTarget); //HTMLBodyElement
});

Prosesnya secara kasar:

fasa tangkapan dokumen.badan --> btn fasa objek sasaran --> fasa menggelegak dokumen.badan

Di atas adalah mengenai objek acara JavaScript, saya harap ia akan membantu pembelajaran semua orang.