162.課件1&DOM0和DOM2的運行機制(事件池機制) · 原生js-2018

~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>珠峰培訓</title> <link rel="stylesheet" href="css/reset.min.css"> <style> #box { margin: 20px auto; width: 100px; height: 100px; background: lightcoral; cursor: pointer; } </style> </head> <body> <div id="box"></div> <script> /* * 事件綁定 * DOM0 * box.onclick=function(){} * 每一個元素對象都是對應類的實例，瀏覽器天生為其設置了很多私有屬性和公有的屬性方法，而onclick就是其中的一個私有屬性（事件類私有屬性，還有很多其它的事件私有屬性），這些屬性默認值是null * DOM0事件綁定的原理：就是給元素的某一個事件私有屬性賦值（瀏覽器會建立監聽機制，當我們觸發元素的某個行為，瀏覽器會自己把屬性中賦的值去執行） * * DOM2 * box.addEventListener('click',function(){},false) =>removeEventListener是移除（使用的方法都是EventTarget.prototype定義的） * * 在IE低版本中使用的是attachEvent來處理的：box.attachEvent('onclick',function(){}) 移除使用的是dettachEvent * * 1.DOM2事件綁定可以給當前元素的某一個事件行為綁定“多個不同的方法” */ /*//=>DOM0事件綁定：只允許給當前元素的某個事件行為綁定一個方法，多次綁定，后面綁定的內容會替換前面綁定的，以最后一次綁定的方法為主 box.onclick = function () { console.log(1); }; box.onclick = function () { console.log(2);//=>觸發點擊行為，只輸出2 };*/ /*function fn1(){console.log(1);} function fn2(){console.log(2);} function fn3(){console.log(3);} function fn4(ev){ console.log(4,this===box,ev.target); box.detachEvent('onclick',fn5); box.detachEvent('onclick',fn8); } function fn5(){console.log(5);} function fn6(){console.log(6);} function fn7(){console.log(7);} function fn8(){console.log(8);} function fn9(){console.log(9);} function fn10(){console.log(10);} function fn11(){console.log(11);} function fn12(){console.log(12);} box.attachEvent('onclick',fn1); box.attachEvent('onclick',fn3); box.attachEvent('onclick',fn5); box.attachEvent('onclick',fn7); box.attachEvent('onclick',fn9); box.attachEvent('onclick',fn2); box.attachEvent('onclick',fn2);//=>重復 box.attachEvent('onclick',fn2);//=>重復 // box.addEventListener('mouseenter',fn2);//=>增加到事件池中的 box.attachEvent('onclick',fn4); box.attachEvent('onclick',fn6); box.attachEvent('onclick',fn8); box.attachEvent('onclick',fn10); box.attachEvent('onclick',fn11); box.attachEvent('onclick',fn12);*/ /* * DOM2事件綁定的兼容 * [谷歌 VS IE高版本] * 在移除事件綁定的時候，如果移除操作發生在正要執行的方法之前（例如：點擊的時候，正要執行FN8，但是在執行FN4的時候，我們把FN8從事件池中移除了），谷歌下是立即移除生效，第一次也不再執行FN8了，而IE是當前本次不生效，下一次點擊才生效，第一次點擊還是要執行FN8的； * * [標準 VS IE低版本] * 標準：addEventListener / removeEventListener * IE低：attachEvent / detachEvent * * 標準用的是行為名稱“click”，而IE低版本使用時前面要加on“onclick” * * 1.THIS問題 * 標準瀏覽器中，行為觸發方法執行，方法中的THIS是當前元素本身，IE低版本中THIS指向了WINDOW * * 2.重復問題 * 標準瀏覽器中的事件池是默認去重復的，同一個元素的同一個事件行為不能出現相同的綁定方法，但是IE低版本的事件池機制沒有這么完善，不能默認去重，也就是可以給同個元素的同個事件綁定相同的方法了 * * 3.順序問題 * 標準瀏覽器是按照向事件池中存放的順序依次執行的，而IE低版本是亂序執行的，沒有規律 * * IE低版本瀏覽器出現的所有問題都是由于本身自帶的事件池機制不完整導致的 */ /* * DOM0事件綁定和DOM2事件綁定的區別 * 1.機制不一樣 * DOM0采用的是給私有屬性賦值，所以只能綁定一個方法 * DOM2采用的是事件池機制，所以能綁定多個不同的方法 * * 2.移除的操作 * 3.DOM2事件綁定中增加了一些DOM0無法操作的事件行為，例如：DOMContentLoaded事件（當頁面中的HTML結構加載完成就會觸發執行） */ // box.onclick = function () { // // }; // box.onclick = null;//=>賦值為NULL就移除了（所以不需要考慮綁定的是誰） // box.addEventListener('click', function () { // console.log(1); // }); // box.removeEventListener('click', function () { // //=>DOM2在移除的時候，必須清楚要移除哪一個方法，才能在事件池中移除掉，所以基于DOM2做事件綁定，我們要有 “瞻前顧后” 的思路，也就是綁定的時候考慮一下如何移除（技巧：不要綁定匿名函數，都綁定實名函數） // console.log(1); // }); // let fn = function () { // //... // }; // box.addEventListener('DOMContentLoaded', fn);//=>可以 // box.onDOMContentLoaded = fn;//=>不可以,BOX沒有這個屬性 /*window.onload = function () { //=>當頁面中的資源都加載完成（HTML結構加載完、CSS和JS等資源加載完成等）才會觸發執行 }; // window.addEventListener('load',function(){}); //=>這樣處理也可以執行多次了 //=>$(document).ready(function(){}) //原理：基于DOMContentLoaded完成的(IE中用的是onreadystatechange監聽的，在document.readyState === "complete"時候執行函數) $(function () { //=>當頁面中的HTML結構加載完成就會執行 }); $(function(){ //=>基于DOM2事件綁定的，所以在同一個頁面中可以執行多次（綁定多個不同的方法），當結構加載完成，會依次執行這些方法 });*/ //=>可以共存，執行順序和編寫順序有關系 box.addEventListener('click', function () { console.log(2); }); box.onclick = function () { console.log(1); }; box.addEventListener('click', function () { console.log(3); }); </script> </body> </html> ~~~