鼠标焦点获取与失去:
onfocus获取焦点事件:在鼠标光标获取输入框焦点时触发
onblur失去焦点事件:在鼠标光标失去焦点时触发。
input.οnblur=function(){
console.log(this.value);
}
鼠标单机与双击:
onclick单击事件:在鼠标指针单击时触发
ondblclick双击事件:在鼠标光标双击时触发。
box1.ondblclick = function () {
this.style.backgroundColor = "yellow";
}
键盘事件:
onkeydown:键盘按下 onkeyup:键盘抬起
var input = document.querySelector('input')
input.οnkeydοwn=function(){
console.log('键盘按下');
}
input.οnkeypress=function(){
console.log('键盘按压');
}
input.οnkeyup=function(){
console.log('键盘抬起');
}
浏览器事件:onload:浏览器加载完成执行 onscroll:滚动浏览器滚动条时触发
window.onscroll = function () {
console.log("滚动了!");
}
执行事件的步骤:获取元素、绑定事件、书写事件驱动程序
监听事件:btn.addEventListener("事件的类型",事件的处理程序)
btn.addEventListener("click",function)
解绑监听:btn.removeEventListener("click", function);
事件对性的兼容性写法:var event = event || window.event;
元素坐标:clientX与clientY 事件被触发时鼠标与浏览器界面位置 原点在左上角
pageX与e.pageY 事件被触发时鼠标与浏览器界面位置再加上滚动的距离
事件冒泡:子级元素事件被触发,父级也触发 且子级先触发
阻止冒泡:
var event = event || window.event;
// propagation n. 传播; 英[ˌprɒpə'ɡeɪʃ(ə)n]
event.stopPropagation();
阻止事件默认行为:event.preventDefault()
阻止a链接跳转: <a href="https://www.baidu.com" οnclick="fn1(); return false">百度</a>
元素属性操作:
getAttribute("属性"):不仅可以获取元素本身的属性的属性值,还可以获取元素自定义的属性的属性值
console.log(input.getAttribute("type"));
setAttribute('属性','值')可以设置元素属性
nput.setAttribute("type","password")
移除属性: removeAttribute("属性"):
div1.removeAttribute("name1");