web前端鼠标/键盘事件

这篇文章是写给女朋友用来学习鼠标/键盘事件写的~勿喷

鼠标事件

鼠标事件概览

mousedown:鼠标按钮被按下(左键或者右键)时触发。不能通过键盘触发。

mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。

click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。

dblclick:双击鼠标左键时触发。

mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。

mouseout:鼠标移出目标元素上方。

mouseenter:鼠标移入元素范围内触发,该事件不冒泡,即鼠标移到其后代元素上时不会触发。

mouseleave:鼠标移出元素范围时触发,该事件不冒泡,即鼠标移到其后代元素时不会触发。

mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。

给元素绑定鼠标事件

用JavaScript来绑定鼠标事件

需要用到一个函数:addEventListener(event, function, useCapture);

参数说明:
event		不可为空。字符串,指定事件名。
		 	不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
		 	可选值为上述的事件概览:mousedown mouseup click等等
		 
function	不可为空。指定要事件触发时执行的函数。

useCapture	可选。布尔值,指定事件是否在捕获或冒泡阶段执行。
			true - 事件句柄在捕获阶段执行
			false- 默认事件句柄在冒泡阶段执行

举例:

<body>
	<div id='a'></div>

</body>
<script>
	//获取dom元素
	var doma=document.getElementById("a");
	a.addEventListener('click',function(){alert(1)},false);
</script>

键盘事件

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值