事件是什麼?事件有什麼用?這篇文章將給大家分享關於javascript中DOM的事件分析,並為大家介紹了關於事件的概念以及事件的用法。
事件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>
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>
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>
##不使用默認,而是
<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>
<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>相關推薦:
JS的DOM事件模型分析
理解javascript中DOM事件_javascript技巧
以上是javascript中DOM的事件分析(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!