一、js事件类型
1、鼠标事件:
onclick 鼠标点击一次
ondclick 鼠标点击两次
onmousedown 鼠标按下
onmousemove 鼠标移动
onmouseout 鼠标移开
onmouseover 鼠标移至某元素上
onmouseup 鼠标松开
2、键盘事件:
onkeydown 某个键盘的键按下
onkeypress 某键按下或按住
onkeyup 某键被松开
[注意事项]
①执行顺序:keydown keypress keyup
②keypress只能捕获数字,字母,符号键,而不能捕获功能键。
③长按时循环执行keydown–keypress
④有keydown,并不一定有keyup,当长按时焦点失去,将不再触发keyup
⑤keypress区分大小写,keydown,kewup不区分。
3、文件加载事件:
onabort 图片加载被中断
onerror 加载时发生错误
onload 加载完成
4、其他:
有多种分类,3与4归为同一类 – HTML事件
onfocus 元素获得焦点
onsubmit 点提交
onunload 退出页面
onblur 元素失去焦点
onchange 用户改变区域内容
onreset 重置按键被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onpropertychange 文本框内任何属性改变
当触发一个事件时,该事件将向事件所调用的函数中,默认传入一个参数,这个参数就是一个事件因子,包含了该事件的各种详细信息。即函数中常见的e/event;
二、事件绑定方式
1、行内绑定:写在html标签属性中的属性值
<button onclick="func()">内联模型绑定</button>
缺点:
1、内容与行为在一起,不符合分离规范
2、一旦绑定,无法取消
2、动态绑定:通过js选中某个节点,然后给节点添加on-xx属性。
document.getElementById("btn1").onclick=function(){
alert("click");
}
优点:符合分离规范,html部分代码看起来整洁
缺点:
1、同一个节点只能添加一次同类型事件;多次,最后一个生效。
2、一旦绑定,无法取消。
3、使用addEventListener动态绑定
document.getElementById("btn1").addEventListener("click",函数,true/false);
优点:
1、同一个节点,可以绑定多个同类型事件。
2、可以有专门的函数进行取消。
注意点:
1、removeEventListenter取消的时候与对应的addEventListenter函数参数位置必须为函数名, 不能带参数,匿名函数无法取消。
document.getElementById("div2").addEventListener('click', alertFun);
document.getElementById("div2").removeEventListenter('click', alertFun);
2、addEventListener函数位置为匿名函数带参数,则刷新即触发;
document.getElementById("div1").addEventListener('click', alertFunX('1'));
第三个参数true/false决定事件捕获\冒泡
false --> 冒泡;true --> 捕获;
事件冒泡:触发事件,从当前节点依次触发父祖级同类型节点,直到DOM根节点;e.stopPropagation();阻止冒泡
时间捕获:触发事件,从DOM根节点依次触发同类型节点到当前节点自身。
阻止事件还有一个:event.preventDefault()是阻止默认行为,并不是阻止捕获或者冒泡,而是阻止默认会触发的行为,如a元素的默认行为点击会跳转。无法替代e.stopPropagation()作为阻止冒泡。
补充:
jquery的事件绑定:
jquery在1.7的版本之后,最流行的事件监听方法是
(委托给哪个元素).on(事件名,被委托的元素,执行函数);