change事件(只针对表单)
如果标签内容value值发生改变,并且失去焦距触发
input 中的text checkbox radio
select(下拉菜单) select.value是选中的值
select会有多选(multiple)的可能性,这样会导致value一直是第一次选中的值
select.selectedOptions 被选择的多个元素
select.selectedIndex 选择下标
load error 用于图片的加载,ajax的通信以及JSON或者其他文件的加载
load是加载成功
error 是加载错误
var img=new Image() //document.createElement(“img”);
任何内容没有放在页面中,不能调用clientWidth,offsetWidth,scrollWidth。
img.addEventListener(“load”,loadHandler)
img.addEventListener(“error”,errorHandler)
load还可以用于window加载创建完成。使用window侦听load事件,意味着:
所有DOM加载完成,所有图片加载完成
window.addEventListener(“load”,loadHandler);
function loadHandler(e){
这里的函数是window中的所有DOM加载完成后执行的函数
}
reset submit
只能针对form表单侦听,不能针对input
form.addEventListener(“submit”,submitHandler);
function submitHandler(e){
e.preventDefault();
e.returnValue=false 兼容写法
}
resize
针对window和textArea
window.addEventListener(“resize”,resizeHandler)
function resizeHandler(e){
当窗口大小改变时收到事件
}
rem 相对于HTML的fontsize
html.fontsize=html.width/screen100
document.documentElement.style.fontSize=document.documentElement.clientWidth/screen.width100+“px”;
select
只针对input,input文本选择文字时触发
var input=document.querySelector(“input”);
input.addEventListener(“select”,selectHandler);
// input文本选择文字时触发
function selectHandler(e){
// console.log(“aa”);
// console.log(input.selectionStart);
// console.log(input.selectionEnd);
input.value=input.value.slice(0,input.selectionStart)+input.value.slice(input.selectionEnd);
}
scroll
滚到条位置改变时触发
popstate
当历史记录被回退和前进时触发
window.addEventListener(“popstate”,popstateHandler)
history.pushState({a:1},"","#1")