js的基本事件
一.鼠标事件
1. onclick 鼠标单击事件## 标题
2. ondblclick 双击鼠标左键时触发
3. oncontextmenu 鼠标右键,弹出鼠标菜单
4. onmouseover 鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
5. onmouseout 鼠标移出目标元素上方。
6. onmousedown 鼠标按钮被按下时触发,不能通过键盘触发。
7. onmouseup 鼠标按钮被释放弹起时触发,不能通过键盘触发。
8. onmouseenter 鼠标移入元素范围内触发,该事件不冒泡,即鼠标移到其后代元素上时不会触发
9. onmouseleave 鼠标移出元素范围时触发,该事件不冒泡,即鼠标移到其后代元素时不会触发
10.onmousemove 鼠标在元素内部移到时不断触发。不能通过键盘触发。
二.键盘事件
onkeydown 键盘按下
onkeyup 键盘抬起
keycode 过去键盘对应的ASCII值
e.ctrlkey ctrl键是否被按下
e.shiftkey shift键是否被按下
三.scroll滚动事件
window.onscroll = function(){} 窗口滚动
节点.onscroll = function(){ } 元素滚动
document.documentElement.scrollHight 页面实际高度
documen.document.scrollTop 滚动距离
document.documentElement.clientHeight 浏览器可视区域高度
scroll(x,y)
scrollTo(x,y)
四.表单事件
- onsubmit 提交事件
- onchange 选中项变化
- onblur 失去焦点
- onfous 获取焦点
- oninput 输入框输入内容时
- onrest() 表单重置
.rest() 表单的重置事件
return false 可以阻止表单提交
五.事件委托
eg:
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
- 在点击li完毕后由于事件冒泡,会触发ul的点击事件
- 如果只给ul绑定事件,那么点击李的时候会触发ul的点击事件
- 不会for循环,降低Dom 的就绪事件
- 不会在内存中存在多个功能想死的函数对象,降低内存占用空间
- 如果给document绑定点击事件,那么可以通过这个事件来管理网页中所有该类
六.事件监听
1. <p onclick = "事件函数()"></p> 事件绑定
node.onclick =function(){};
node.onclick() 可直接调用
2. node.addEventListener('事件名',匿名函数(布尔值)) 事件监听
node.removeEventListener('事件名',函数名) 移出事件监听
eg: node.addEventListener('click', function(){...})
eg: function aa(){
alert('添加监听事件')
}
p.addEventListener('click', aa,false)
p.removeEventListener('click',aa)
事件监听的好处:
重复事件被覆盖的问题
可以更精准的删除或添加搞定的事件函数
第三个参数默认值是false(冒泡),true(事件捕获)
七.阻止事件冒泡
1.return false 阻止冒泡
2.event.stopPropagation() 阻止冒泡
3.window. event.cancelBubble = true
4.event.prevebtDefault() 阻止默认行为

浙公网安备 33010602011771号