1、事件是什麼
讓JS知道程式使用者行為，比如使用者點擊HTML頁面中的某個按鈕和使用者輸入使用者名稱與密碼等操作
<script> var button = document.getElementById('btn');// 擷取按鈕元素 button.onclick = function () {// 事件綁定 console.log('你已點了我'); } </script>
2.註冊事件
JS函數與指定事件相關聯，被綁定函數成為事件的控制代碼
事件被激發時，會綁定函數會被調用
HTML元素的事件屬性
表示實註冊事件功能
該方式並沒有與HTML結構與行為有效分離
<body><button onclick="mylove()" id="btn">按鈕</button><script> function mylove() { console.log('你已點了我'); }</script></body>
DOM對象的事件屬性
將Document對象定位在THML頁面元素
並返回DOM對象體屬性，通過它實現各種註冊事件功能
<body><button id="btn">按鈕</button><script> var btn = document.getElementById('btn'); btn.onclick = mylove; function mylove() { console.log('你已點了我'); }</script></body>
事件監聽器
以addEvantLisener()方法，調用該方法表示元素增加事件監聽器
body><button id="btn">按鈕</button><script> var btn = document.getElementById('btn'); btn.attachEvent('onclick',function () { console.log('XXX'); }) function bind(element,eventName, functionName) { if (element.addEventListener) { element.addEventListener() } }</script></body>
事件監聽器中的this
使用addEventListener()方法為頁面註冊事件時候，this是指註冊事件元素
使用attachEent()方法為頁面註冊事件時候，this是指Window對象，，不是註冊事件
<script> var qyc =document.getElementById('qyc'); /*qyc.addEventListener('click',function () { console.log(this);//this指當前綁定事件的元素 });*/ /*qyc.attachEvent('onclick',function () { console.log(this);//this指當前環境的全域對象（Window對象） });*/ bind(qyc,'click',function () { console.log(this);//在不同的瀏覽器中，this會有不同的表示 }); function bind(element, eventName, functionName) { if (element.addEventListener) { } else { element.attachEvent('on' + eventName, function () { functionName.call(element) }); } }//此為IE8之前的版本相容的解決方案</script></body>
3、移除註冊事件
removeEventListener()方法，調用此方法表示元素移除事件聽器
<body><button id="qyc">按鈕</button><script> var qyc = document.getElementById('qyc'); function mylove() { console.log('XXX'); } qyc.addEventListener('click',mylove); qyc.addEventListener('click',function () { console.log('YYY'); }); qyc.removeEventListener('click',mylove); function unbind(element,eventName,functionName) { if (element.removeEventListener) { element.removeEventListener(eventName, functionName); }else { element.detachEvent('on' + eventName, functionName); } }</script></body>
4、Event事件對象
表示移除註冊事件在IE8之前版本的
瀏覽器不支援removeEventListener()方法
<body><button id="qyc" onclick="mylove(event)">按鈕</button><script> var qyc = document.getElementById('qyc'); qyc.addEventListener('click',function (event) { console.log(event); }); qyc.attachEvent('onclick',function () { console.log(window.event); }); function bind(element,eventName, functipnName) { if (element.addEventListener){ element.addEventListener(eventName,functipnName) } else { element.attachEvent('on' + eventName, function(){ functipnName.call(element); }); } }</script>
5、擷取目標
Event事件對象提供target屬性，擷取觸發當前事件的HTML元素
Event事件對象提供currentTarget屬性，擷取註冊當前事件的HTML元素
<style> ul { background-color: red; } #wl { background-color: blue; } a { background-color: yellow; } </style></head><body><ul id="yx"> <li>單機遊戲</li> <li id="wl"><a href="#">網路遊戲</a></li> <li>手機遊戲</li></ul><script> var yx = document.getElementById('yx'); yx.addEventListener('click',function (event) { console.log(event.target);// target屬性-擷取綁定當前事件目標元素 console.log(event.currentTarget);// currentTarget屬性-擷取綁定當前事件目標元素 console.log(this); }); yx.attachEvent('onclick',function (event) {// IE8以下瀏覽器提供srcElement屬性為target目標元素 var e = event || window.event; console.log(e.srcElement); });</script></body>
6、阻止預設行為
不使用預設，而是
<body><a href="#">連結</a><script> var aElement = document.getElementsByName('a'); /*aElement.addEventListener('click',function(event){ event.preventDefault();// 阻止預設行為 });*/ aElement.onclick = function (event) { event.preventDefault(); return false; } aElement.attachEvent('onclick',function (event) { var e = event || window.event; e.returnValue = false; })</script></body>
7、擷取滑鼠
pageX和pageY表示相對於頁面中
clientX和clientY表示可視地區
screenX和screenY表示在當前螢幕的
<body><script> var html = document.documentElement; html.addEventListener('click',function(event){ console.log(event.pageX, event.pageY); // 滑鼠座標值相對於當前HTML頁面 console.log(event.clientX, event.clientY); // 滑鼠座標值相對於當前可視地區 console.log(event.screenX, event.screenY); // 滑鼠座標值相對於當前螢幕的 // 滑鼠座標值只能擷取，不能設定 });</script></body>
8、事件流
<style> #q1 { width: 200px; height: 200px; background-color: red; padding: 50px; } #q2 { width: 100px; height: 100px; background-color: yellow; padding: 50px; } #q3 { width: 100px; height: 100px; background-color: blue; } </style></head><body><div id="q1"> <div id="q2"> <div id="q3"></div> </div></div><script> var q1 = document.getElementById('q1'); q1.addEventListener('click',function(){ console.log('這是d1... ...'); }, false); var q2 = document.getElementById('q2'); q2.addEventListener('click',function(){ console.log('這是d2... ...'); }, false); var q3 = document.getElementById('q3'); q3.addEventListener('click',function(event){ console.log('這是q3... ...'); event.stopPropagation(); }, false);</script></body>
9、事件委託
大量的HTML元素註冊相同事件，並事件控制代碼邏輯安全相同，會造成頁面速度下降，不果事件流允許這些HTML元素同父級元素註冊事件
<body><div id="qh"> <button id="qyc1">按鈕</button> <button id="qyc2">按鈕</button> <button id="qyc3">按鈕</button></div><script> var qyc1 = document.getElementById('qyc1'); qyc1.addEventListener('click',function(){ console.log('這是個按鈕'); }); var qyc2 = document.getElementById('qyc2'); qyc2.addEventListener('click',function(){ console.log('這是個按鈕'); }); var qyc3 = document.getElementById('qyc3'); qyc3.addEventListener('click',function(){ console.log('這是個按鈕'); }); var qh = document.getElementById('qh');// 不把事件綁定給指定元素，綁定給共同父級和祖先元素 qh.addEventListener('click',function (event) { var target = event.target;//觸發事件目標元素 if(targe.nodeName === 'BUTTON') { console.log('這是個按鈕'); } })</script></body>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
