JavaScript學習筆記整理Day14

標籤：log   判斷   bubble   lis   var   使用   isp   body   取消   

一.Scroll事件    ---元素內部內容的滾動

　　1.有捲軸的元素

　box.onscroll = function(){            //擷取滾動距離  --內容的滾動   　　var scroll_left = this.scrollLeft; //往左的滾動距離  　　var scroll_top = this.scrollTop; //往上的滾動距離     console.log(scroll_left,scroll_top);        }

　　2.給window綁定scroll事件

window.onscroll = function(){            //擷取滾動距離   --內容的滾動距離var index = document.body.scrollTop || document.documentElement.scrollTop; if(index > 1000){      btn.style.display = ‘block‘;}else{      btn.style.display = ‘none‘;      }     console.log(index);   }      function toTop(){ document.body.scrollTop = 0;        }

二.Resize事件   --綁定給window 視窗尺寸發生改變

　　window.onresize = function(){    //擷取視口的寬度    var width = window.innerWidth || document.documentElement.clientWidth;    //擷取視口的高度    var height = window.innerHeight || document.documentElement.clientHeight;    console.log(width,height);        }

三.新增事件

1. oninput 事件在 <input> 或 <textarea> 元素的值發生改變時觸發。 立即觸發 低版本IE不支援
2. onsearch 針對type=”search” 斷行符號發送的時候觸發 IEFirefox不支援
3. onfocusin 通過父元素判斷子項目是否擷取焦點 --需要使用addEventListener()
4. onfocusout 通過父元素判斷子項目是否失去焦點 --需要使用addEventListener()

四.剪下板事件

　　1.oncopy（）使用者拷貝元素內容時觸發

　　2.oncut() 使用者剪下元素內容時觸發

　　3.onpaste() 使用者粘貼內容時觸發

五.過渡/動畫事件（標準綁定）

　　1.animationend    該事件在 CSS 動畫結束播放時觸發

　　2.animationiteration 事件在重複播放時觸發

　　3.animationstart 動畫開始時觸發

　　4.transitionend 過渡完成以後觸發

六.其他

　　onwheel  滑鼠滾動的時候觸發

七.event事件

　　1.cancelBubble--阻止冒泡  值等於true取消預設動作

　　2.stopPropagation（） --阻止事件冒泡   IE9以下不相容

　　3.terget  返回觸發事件的元素

　　4.preventDefalut（）--阻止js的預設事件

　　5.type --返回事件類型

　　6.timeStamp（）--返回觸發事件的時間戳記

 

JavaScript學習筆記整理Day14