一.注册事件方式
1.传统注册事件,注册事件唯一性
btns[0].onclick=function(){
alert("hi");
}
2. 方法监听注册事件 addEventListener
ie9才以上支持
(1)里面的事件类型是字符串 必须加引号 而且不带on
(2)同一个元素 同一个事件可以添加 多个侦听器(事件处理程序)
btns[1].addEventListener("click",function(){
alert(22);
})
二·.删除事件方式
1.传统方式删除事件
divs[0].onclick=function(){
alert(1);
// 传统方式删除事件
divs[0].onclick=null;
}
2.removeEventListener删除事件
divs[1].addEventListener("click",fn);//里面的fn不需要调用加小括号
function fn(){
alert(33);
divs[1].removeEventListener("click",fn);
}
三.事件对象
var div=document.querySelector("div");
// div.onclick=function(event){
// console.log(event);
// }
div.addEventListener("click",function(e){
console.log(e);
})
1.event 就是一个事件对象 写的我们侦听函数的小括号里面 当形参来看
2.事件对象只有有了事件才会存在 它是系统给我们自动创建的,不需要我们传递参数
3.事件对象 是我们事件的一系列相关数据的集合 跟事件相关 比如鼠标点击就包含了鼠标的相关信息、鼠标坐标啊,如果是键盘事件里面就包含了键盘事件的信息 比如判断用户按下了那个键。
4.这个事件对象我们可以自己命名,比如 event evt e
5.事件对象也有兼容性问题ie678 可以通过window.event 兼容性的写法:e=e||window.event
四.常见事件对象属性和方法
1.鼠标事件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发
onmouseenter 鼠标移入
onmouseleave鼠标移出
e.target返回的是触发事件的对象(元素) this 返回的是绑定事件的对象(元素)
区别 :e.traget 点击哪个元素就返回哪个元素 this是哪个元素绑定了这个事件就返回谁
(1) e.type 返回事件的类型 比如 点击 鼠标经过
(2) e.traget 指向我们点击的对象 谁触发了这个事件 我们点击了li , e.traget 返回的是li
(3)阻止默认行为e.preventDefault()
var a=document.querySelector("a");
a.addEventListener("click",function(e){
e.preventDefault();//dom 标准写法
})
//阻止a链接跳转
(4)contextmenu 禁止右键菜单
document.addEventListener("contextmenu",function(e){
e.preventDefault();
})
(5)禁止选中文字 selectstart
document.addEventListener("selectstart",function(e){
e.preventDefault();
})
client 鼠标在可视区的屏幕坐标(e.clientX , e.clientY);
page 鼠标在页面文档的坐标 (e.pageX , e.pageY);
(6) 鼠标移动事件 mousemove
2.常用键盘事件
(1)keyup 按键弹起的时候触发
(2)keydown 按键按下的时候触发
(3)keypress 按键按下的时候触发 不能识别功能键 比如ctrl shift 左右箭头
键盘事件对象中的keyCode 属性可以得到相应键的ASCII值
我们的keydown和keyup事件不区分字母大小写 a 和 A 得到的都是65
我们的keypress 是区分字母大小写的 a 97 和 A 65
我们可以利用keyCode返回的ASCII值来判断用户按下了哪个键