轮播图

选项卡

一、Scroll事件

        元素内部内容的滚动 --内容向左滚动， 滚动条向右

        1.有滚动条的元素

                 box.onscroll = function(){

                         var left = box.scrollLeft;

                         var top = box.scrollTop;

                }

        2.给window绑定scroll事件

                 var top=document.body.scrollTop  ||                 document.documentElement.scrollTop;

二、Resize事件

        绑定给window  窗口尺寸发生改变

        获取窗口大小

                w  = window.innerWidth;

                h = window.innerHeight;

                window.onresize = function(){

                        var w = window.innerWidth;

                        var h = window.innerHeight;

                }

三、新增事件

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 过渡完成以后触发

六、 其他

1、onwheel 鼠标滚动的时候触发 (onmousewheel 已废弃)

event对象

1、cancelBubble--阻止冒泡 值等于true取消默认动作

        var e = en || window.event;

                if(e.stopPropagation){

                e.stopPropagation();

        }else{e.cancelBubble=true}

2、target 返回触发事件的元素 Console.log(e.target);

3、stopPropagation() 阻止事件冒泡 IE9 以下不兼容

4、阻止js默认事件 (a,contextmenu)

        a.onclick=function(en){

                var e = en || window.event;

                alert('ok');

                e.preventDefault();

      }

5、返回事件类型

        div.onclick=show;

        function show(en){

               var e = en || window.event;

                alert(e.type);

         }

6、返回触发事件的时间戳

         document.onclick = function(e){

                var e = e || window.event;

                console.log(e.timeStamp);

         }