JavaScript学习笔记整理Day14

Posted 2020-09-23

一.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” 回车发送的时候触发 IE火狐不支持
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（）--返回触发事件的时间戳