js dom 事件
1.什么是事件(发生的一件事情)
事件处理:发生某个事情后,你的反响(你的处理方式)
问题:网页事件发生,如果想对网页对应的事件发生后,做一些处理.
解决方案:对事件进行绑定(指事件绑定处理程序–函数),将事件和对应事件处理进行关联
2.如何绑定事件(js)
2.1传统绑定事件方法
方法1:
btnLogin.οnclick=function(){}
示例:
let btnLogin = document.getElementByld("'btnLogin");//方法1:
btnLogin.onclick = function()(
};
方法2:
btnLogin.onclick = test;//此处不加括号,只做关联
function test(){
alert("登录成功");
}
取消绑定:
节点.事件属性= null;
2.2现代绑定DOM2事件
1.注意:
新添加的一些事件,如touch(触摸)事件, DOMContentLoaded(dom内容加载完成)事件必须使用现代方式添加。
2.现代绑定 区分浏览器
dom: 谷歌 火狐 IE edge
非dom: IE老版本(IE8 及以下)
3.语法:
绑定事件:
节点.addEventListener("事件名",事件处理程序,事件流);
// 事件名不带on,如click
// 事件流为Boolean值,为false(默认)时为冒泡,为true时为捕获;
例:
btnLogin.addEventListener("click", test);
function test(){
alert("登录成功");
}
取消绑定事件:
节点.removeEventListener("事件名",事件处理程序);
// 匿名函数不能被移除
IE浏览器:
绑定:
节点.attachEvent("事件名", 事件处理, 是否冒泡);
取消绑定:
节点.detachEvent(事件名,事件处理程序)
注:使用什么绑定事件,就要使用对应的方法取消事件
3.传统绑定和现代绑定的优缺点
传统绑定:
兼容性高,不能绑定多个事件处理程序,有些新添加的事件不能绑定
现代的特点:
兼容性低,可以添加多个事件处理程序,所有事件都可以进行绑定
4.事件流
会发生的事件,执行的顺序,称之为事件流。
分为:
1、冒泡事件流:从精确到模糊,从里到外;
2、捕获事件流:从模糊到精确,从外到里;
3、DOM事件流:捕获阶段,目标阶段,冒泡阶段;
5.事件对象(存储事件相关的信息)
//arguments存储,函数调用时传递参数列表
dom: arguments[0] -> 获取传入函数的第一个参数
非dom: window.event
兼容性写法: var e = arguments[0] || window.event;
事件对象中的属性与方法:
type: 事件类型
DOM IE
事件源,触发事件的对象 target srcElement
阻止默认行为(链接跳转) preventDefault() returnValue=true
阻止事件冒泡 stopPropagation() cancelBubble=true
6.事件类型
分为三类
鼠标事件:
onclick :鼠标按下并抬起
onmousedown :鼠标按下
onmouseup :鼠标抬起
onmouseover :鼠标移入
onmouseout :鼠标移出
和hover的区别: hover移出后又会变为原来的样子,如果不想变为原来的样子,就可以用移入移出来做
ondblclick :鼠标双击
onmousemove :鼠标移动
键盘事件:
onkeydown :键盘按下(所有键)
onkeyup :键盘弹起
onkeypress :键盘按下并抬起,只能监听非功能按键,比如ctrl就是功能键
浏览器事件:
onfocus :获取焦点input框
onblur :失去焦点input
onchange: 改变事件
onselect: 选中
onscroll: 滚动事件
onresize: 窗口大小改变
onload: 加载完成
oninput: 输入框输入内容时
onsubmit: 提交
onreset: 重置