轮播图
选项卡
一、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 事件在或
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);
}