js常用事件演示

目录

一. 什么是事件？

1. 事件三要素

2. 常用的事件

二.常见事件写法：

三、鼠标与滚轮事件?

四、键盘和文本事件

---

一. 什么是事件？

事件： 指用户在某事务上由于某种行为所执行的操作；拿例子通俗的来说：比如点击一个按钮，让它在点击后实现某些效果；点击之后触发实现效果，即就是给这个按钮添加了点击事件。

1. 事件三要素

事件源：添加事件的对象；
事件类型：添加哪种类型的事件；
事件处理函数：触发事件执行的函数。?

2. 常用的事件

鼠标事件：

事件	事件名称	触发条件
onclick	点击事件	单击鼠标左键触发
ondblclick	双击事件	双击鼠标左键触发
onmouseover	移动到	鼠标移动到事件源上触发
onmouseout	鼠标离开事件	鼠标移出事件源触发
onmousemove	移动事件	鼠标在事件源上移动时触发(只要移动就触发)
onmousedown	鼠标按下事件	鼠标按下任意一个键触发
onmouseup	鼠标松开事件	鼠标按下任意一个键松开时触发

?键盘事件：

事件	事件名称	触发条件
onkeydown	按键事件	按下键盘任意一个键时触发(一直按一直触发)
onkeyup	按键抬起事件	释放(按下松开)某个按键时触发
onkeypress	按键事件	和onkeydown类似，不过不包含shift等功能键

HTML事件：

事件	事件名称	触发条件
onfocus	聚焦事件	任意元素或窗口获得焦点时触发(一般用在表单输入框)
onblur	聚焦事件	任意元素或窗口失去焦点时触发(一般用在表单输入框)
onload	加载事件	页面全部加载完成后在window对象上触发

二.常见事件写法：

1.嵌入式(传统事件绑定)
	优点：简单易懂
	缺点：将JavaScript代码与html代码混为一起，不利于多人协作开发

//例如：(直接在HTML中写入JS代码)
<button onclick="alert('hello')" onmouseover="show()" id='btn'>点击</button>

2.脚本模型(现代事件绑定)
 	在JavaScript中完成事件的绑定
	obj.onclick=function(){};

//例如
//找到button元素
var btn = document.getElementById('btn');
//添加点击事件
btn.onclick = function(){
	alert('hello');
};

3.W3C事件
 	添加事件：addEventListener(事件名,事件函数,false)
	删除事件：removeEventListener(事件名,事件函数,false)

	注意：事件名 不需要前缀on

//例如
btn.addEventListener('mouseover',function(){
	btn.innerHTML = '点他';
},false);

三、鼠标与滚轮事件?

鼠标事件是Web开发中最常用的一类事件，因为鼠标是最主要的定位设备。?

click   	用户单击鼠标左键或按下回车键触发
dbclick 	用户双击鼠标左键触发。
mousedown 	在用户按下了任意鼠标按钮时触发。
mouseenter 	在鼠标光标从元素外部首次移动到元素范围内时触发。此事件不冒泡。
mouseleave 	元素上方的光标移动到元素范围之外时触发。不冒泡。
mousemove 	光标在元素的内部不断的移动时触发。
mouseover 	鼠标指针位于一个元素外部，然后用户将首次移动到另一个元素边界之内时触发。
mouseout 	用户将光标从一个元素上方移动到另一个元素时触发。   
mouseup 	在用户释放鼠标按钮时触发。
	
补充：以上所有事件除了mouseenter和mouseleave外都冒泡。

?注意：只有在同一个元素上相继触发mousedown和mouseup事件，才会触发click事件。同样，只有在同一个元素上触发两次click事件，才会触发dbclick事件。

四、键盘和文本事件

该部分主要有下面几种事件：

keydown  	当用户按下键盘上的任意键时触发。按住不放，会重复触发。
keypress 	当用户按下键盘上的字符键时触发。按住不放，会重复触发。
keyup 		当用户释放键盘上的键时触发。
textInput 	这是唯一的文本事件，用意是将文本显示给用户之前更容易拦截文本。　


注意：这几个事件在用户通过文本框输入文本时才最常用到。
补充：当我们在input中输入值时，当键盘按下时，此时value还没有值；当键盘松开时，value才获取到此值。如下(键盘按下一个a)：

<input type="text" id="ipt">
<script type="text/javascript">
	var o = document.querySelector('#ipt');
	o.onkeydow = function(){
		//按下键不会打印该键的值
		console.log('按下' + o.value);  // 按下
	};
	o.onkeyup = function(){
		//松开键才打印该键的值
		console.log('抬起' + o.value);  // 抬起a
	};
</script>