JS常用事件,使用方法

一、事件:

加载事件:

  1. load:页面或图像加载完毕

焦点事件:

  1. focus:获得焦点
  2. blur:失去焦点

键盘事件:

  1. keydown:键盘按下
  2. keyup:键盘弹起
  3. keypress:某个键盘按键被按下并松开

点击事件:

  1. click:鼠标单击
  2. dbclick:鼠标双击

鼠标事件:

  1. mouseover(mouseenter):鼠标移入该元素
  2. mouseout(mouseleave):鼠标移出该元素
  3. mousedown:鼠标按下
  4. mouseup:鼠标弹起
  5. mousemove:鼠标移动

表单事件:

  1. reset:表单重置
  2. submit:表单提交

内容被选择或改变:

  1. select:文本被选中
  2. change:下拉列表选中项改变,或文本框内容改变

注意:任何一个事件都会对应一个事件句柄叫做:onclick ,以属性方式存在。

二、注册事件的方式:

  • 第一种方式:直接在标签中使用事件句柄
<script type="text/javascript">
	function dosome(){
		alert("hello");
	}
</script>
<input type="button" value="hello1" onclick="sayhello()"/>
  • 第二种方式:使用纯JS代码
    • 第一步:获取按钮对象。
    • 第二步:给按钮对象的onclick属性赋值。 只要对象中有的属性都可以通过.赋值。
<input type="button" value="hello1" id="m1"/>
<script type="text/javascript">
	function dosome(){
		alert("hello");
	}
	第一步:
	var bt1 = document.getElementById("m1");document是个内置对象,代表整个HTML页面
	第二步:
	bt1.onclick = dosome;注意函数名不加小括号

	简写为: 
	document.getElementById("m1").onclick = function(){
		alert("hello");
	}
</script>
  • 第三种方式:使用纯JS代码,并使用load事件
如果input标签的创建位于document.getElementById("m1")执行之后,因为还没有创建m1标签,所以会报错,解决方法是:使用onload事件
<script type="text/javascript">
	window.onload = a;//这行代码规定了整个页面加载完毕后才能执行回调函数a,防止过早获取m1对象导致找不到对象报错的情况
	function a(){
		document.getElementById("m1").onclick = function(){
			alert("hello");
		}
	}
简写为:
	window.onload = function(){
		document.getElementById("m1").onclick = function(){
			alert("hello");
		}
	}
</script>
<input type="button" value="hello1" id="m1"/>//位于JS代码块之后
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姓蔡小朋友

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值