浏览器事件
一、 BOM :浏览器相关的事件 和 window
window.onscroll = function(){
console.log("滚了");
}
window.onload = function(){
console.log("dom和资源加载完毕");
}
window.onresize = function(){
console.log("窗口改变了");
}
表单事件
表单事件
1.change： 表单内容改变的时候触发
var inputEle = document.querySelector(".inp");
inputEle.onchange = function(){
console.log("表单改变了");
}
2.input ：当表单输入的时候触发
var inputEle = document.querySelector(".inp");
inputEle.oninput = function(){
console.log("输入了值",this.value);
}
3.focus事件： 聚焦的时候触发;
focus函数
var inputEle = document.querySelector(".inp");
inputEle.onfocus = function(){
console.log("聚焦了");
}
document.querySelector("button").onclick = function(){
inputEle.focus();
}
4.blur:失去焦点的时候触发
var inputEle = document.querySelector(".inp");
inputEle.onblur = function(){
console.log("失去焦点的时候触发");
}
inputEle.onchange = function(){
console.log("失去焦点的时候触发");
}
blur 和change事件 区别 ： blur 是只要失去焦点就会触发 ；change 失去焦点的时候输入框有改变
document.querySelector(".checkEle").onchange = function(){
console.log("改变了");
console.log("改变了",this.checked);
}
document.querySelector("#mysel").onchange=function(){
console.log(this.value);
移动端事件
移动端事件 ：1.触摸开始 2. 正在触摸 3.触摸结束
document.ontouchstart=function(){
console.log("触发事件开始");
}
document.ontouchmove=function(){
console.log("触摸进行");
}
document.ontouchend=function(){
console.log("触摸结束");
}
事件绑定
绑定事件方式一：
btn.onclick = function(){
console.log(111);
}
btn.onclick = function(){
console.log(222);
}
绑定事件方式二：添加事件监听
1.可以绑定多个事件 2.事件名不需要on修饰符
btn.addEventListener("click",function(){
console.log(111);
})
btn.addEventListener("click",function(){
console.log(2222);
})
addEventListener 兼容问题 ： Chrome 和 ie8以上浏览器
IE8或者以下attachEvent : 注意 需要加 on
btn.attachEvent("onclick",function(){
console.log("111");
})
兼容函数
functionbindEvent(ele,eventName,fn){
if(window.addEventListener){
ele.addEventListener(eventName,fn);
}else{
ele.attachEvent("on"+eventName,fn);
}
}
网友评论