.addEventListener() //同一個事件注冊多個處理函式
<input type="button" value="https://www.cnblogs.com/xiaoyuheng/p/按鈕" id="btn"> <script> btn = document.getElementById('btn'); btn.addEventListener('click', function(){alert('hello world');}) btn.addEventListener('click', function(){alert('123')}) </script>
注冊事件的方式：
1 btn.onclick=function(){} //缺點：無法給同一個物件的同一個事件注冊多個事件處理函式，因為‘=’為賦值，會把第二個function覆寫第一個function
2 btn.addEventListerner() //可以付多個處理函式，但是有兼容性問題，IE9以后支持
3 .attachEvent() //兼容問題，不講了
處理注冊事件的兼容性問題(addEventListener)
//處理事件兼容性問題 //eventname不帶on，click mouseover， mouseout function addEventListener(elemnet,eventName,fn){ //判斷當前瀏覽器是否支持addEventListener方法 if(element.addEventListener){ element.addEventListener(eventName,fn); //第三個引數默認是false }else if (elemnet.attachEvent) { elemnet.attachEvent('on' + eventName,fn); }else { //相當于element.onclick = fn; elemnet['on'+ eventName] = fn; } }
移除元素事件方式：(使元素事件變成一次性的事件，只能運行一次)
onclick = fn
btn.onclick = function(){ alert('123'); //移除事件 btn.onclick=null; }
addEventListener
btn.addEventListener('click',function(){alert(123)})
//移除事件，因為事件的function是匿名函式訪問不到，所以，要想移除上面的事件，函式必須有名字
fucntion btnclick(){
alert(123);
btn.removeEventListener('click',btnclcik); //移除寫在函式中，直接一次性
}
btn.addE ventListener('click',btnclick);
處理移除兼容性問題
//處理事件兼容性問題 function removeEventListener(elemnet,eventName,fn){ //判斷當前瀏覽器是否支持addEventListener方法 if(element.removeEventListener){ element.removeEventListener(eventName,fn); //第三個引數默認是false }else if (elemnet.detachEvent) { elemnet.detachEvent('on' + eventName,fn); }else { //相當于element.onclick = fn; elemnet['on'+ eventName] = null; } }
事件冒泡：https://www.cnblogs.com/moqing/p/5590216.html
事件委托（原理是事件冒泡）：事件委托不用給內部的每個標簽都寫事件，只需給他們的父標簽寫就好了
<ul id = 'ul'>
<li>西施</li>
<li>貂蟬</li>
<li>昭君</li>
<li>鳳姐</li>
<li>芙蓉姐姐</li>
</ul>
<script>
//事件委托原理是事件冒泡
var ul = document.getElementBuId('ul');
//e是事件引數(事件物件)：當事件發生的時候，可以獲取一些和事件相關的資料
ul.onclick = function(e){
//獲取到當前點擊的li，e.target是真正觸發事件的物件
console.log(e.target);
//讓點擊的li高亮顯示
e.target.style.backgroundColor = 'red';
}
</script>
時間物件
通過事件物件的屬性，可以獲取到事件發生的時候和事件相關的一些資料,btn.onclick = function(e){},e就是事件物件
處理時間物件的瀏覽器兼容性
e=e || window.event
e.eventPhase屬性：代表事件的階段，回傳1，2，3， 1：事件捕獲階段 2：目標階段(事件執行階段) 3：冒泡階段
e.target：獲取真正觸發事件的物件
e.currentTarget：事件處理函式所在的物件，和this一樣
e.type 獲取事件名稱
btn.onclick = function(e){ console.log(e.eventPhase); console.log(e.target);
console.log(e.currentTarget); }
獲取滑鼠在瀏覽器的可視區域的坐標
<div id = 'box'> <script> var box = document.getElementById('box'); box.onclick = function(e){ e = e || window.event; //獲取滑鼠在瀏覽器的可視區域的坐標 不包含滾動軸 console.log(e.clientX)； console.log(e.clientY)； //滑鼠在當前頁面的位置 包含滾動軸 page注意兼容性問題 console.log(e.pageX); console.log(e.pageY); } </script>
跟著滑鼠走的圖片：
<img src = "https://img.uj5u.com/2021/06/14/244171140623011.gif" id = "img"> <srcipt> img = document.getElementById('img'); document.onmousemove = function(e){ e = e || window.event; img.style.left = e.pageX + 'px'; img.style.top = e.pageY + 'px'; } </srcipt>
輸出頁面滾動出去的距離
//橫向滾動出去的距離 console.log(document.body.scrollLeft); //縱向滾動出去的距離 console.log(document.body.scrollTop);
獲取滑鼠在當前盒子內相對盒子的坐標：盒子內的坐標減去外部坐標
<div id = 'box'> </div> <script> //獲取盒子的距離 var box = document.getElementById('box'); box.onclick = function(){ console.log(this.offsetLeft); console.log(this.offsetTop); } </script>
<div id = 'box'> </div> <script> var box = document.getElementById('box'); box.onclick = function(e){ e = e || window.event; //獲取滑鼠在盒子中的位置 = 滑鼠的坐標 - 盒子的坐標 var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; } </script>
取消默認行為的執行：
事件函式末尾添加： return false; DOM標準方法： e.preventDefault(); //兼容問題
阻止事件冒泡：事件函式末尾添加：e.stopPropagation();
鍵盤事件：
keydown: 鍵盤按下的時候
keyup：鍵盤彈起的時候
onkeydown和onkeyup的區別：keydown的時候我們所按的鍵還沒落入文本框，而keyup的時候按的鍵已經落入文本框了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/287079.html
標籤：JavaScript