JavaScript事件监听、解绑

最新推荐文章于 2024-07-14 12:56:18 发布

失忆症患者_

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量705

点赞数

分类专栏： JavaScript基础文章标签： js javascript

本文链接：https://blog.csdn.net/qq_41929578/article/details/108993472

版权

JavaScript基础专栏收录该内容

24 篇文章 1 订阅

订阅专栏

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>

失忆症患者_

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript事件监听、解绑

1. 事件监听元素.addEventListener(“事件绑定类型”,function(){})与.onclick等绑定事件的区别：给按钮添加监听事件，不涉及唯一性问题，里面事件类型必须是字符串，不加on案例体会：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body>
复制链接

扫一扫