1. 事件监听
- 元素.addEventListener(“事件绑定类型”,function(){})
- 与.onclick等绑定事件的区别:
给按钮添加监听事件,不涉及唯一性问题,里面事件类型必须是字符串,不加on
案例体会:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button>按钮</button>
<button>删除</button>
<script type="text/javascript">
var btn = document.querySelectorAll('button')
//给按钮添加监听事件,不涉及唯一性问题,里面事件类型必须是字符串,不加on
btn[0].addEventListener('click',function(){
alert(22)
})
btn[1].addEventListener('click',function(){
alert(552)
})
</script>
</body>
</html>
常用事件:
鼠标事件:
click 单击
dblclick 双击
mousedown 鼠标按下
mouseup 鼠标抬起
mouseover 鼠标移入
mouseout 鼠标移出
mousemove 鼠标移动 不停的触发(只要相对移动了)
mouseenter 鼠标移入
mouseleave 鼠标移出
contextmenu 禁用右键
selectstart 禁止选中
键盘事件:
keydown 键盘按下(如果按住不放,不停的重复触发)
keyup 键盘抬起
keypress 键盘按下(只支持字符键)
2. 事件解绑
- 传统的解绑方式:
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var div = document.querySelectorAll('div')
div[0].onclick = function(){
alert('1111')
//传统的解绑方式
div[0].onclick = null
}
</script>
- 新的解绑方式:绑定元素.removeEventListener(“绑定的事件”,被绑定的函数)
<div>1</div>
<div>2</div>
<div>3</div>
<script>
div[1].addEventListener('click',fu)
function fu(){
alert(222);
div[1].removeEventListener('click',fu)
}
</script>