笔记12-JS事件总结

笔记12-事件总结

一、什么是事件

1、简单来说事件就是用户在网页上的一系列的操作，比如，鼠标点击、双击、敲击键盘等等。。。事件发生有两个方面：事情来了，然后处理。

例如：

• 电话铃声响起（事件发生）—需要接电话（处理）

• 学生举手请教问题（有事了）—需要解答（处理）

• 按钮被点击了，然后对应一个函数来处理

2、事件触发：

当用户点击按钮时，我们就说，触发了按钮的onclick事件。

JavaScript 事件是由访问 Web 页面的用户引起的一系列操作，例如：用户点击。当用户 执行某些操作的时候，再去执行一系列代码。

JavaScript 有两种事件模型：内联模型、脚本模型

a、内联模型 : 这种模型是最传统接单的一种处理事件的方法。在内联模型中，事件处理函数是 HTML 标签的一个属性，用于处理指定事件。虽然内联在早期使用较多，但它是和 HTML 混写的， 并没有与 HTML 分离。

举例：<input type="button" value="按钮" onclick="alert('dw');" />

b、**脚本模型：**由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题，我们可以在 JavaScript 中处理事件。这种处理方式就是脚本模型。

var input=document.getElementsByTagName(‘input’)[0];  遵循命名规则：驼峰、匈牙利、下划线

//得到 input 对象

input.onclick=function(){

//匿名函数执行

  alert(‘Lee’);

};

//或者 
input.onclick = a();
function a(){
     alert(‘Lee’);
}
// 不建议写法！！
//预解析函数不能提升，只能在函数后设定点击事件，顺序错误则失效
var res = function(){
    alert(‘Lee’);
}
input.onclick = res();

二、事件驱动

js控制页面的行为是由事件驱动的，这样才能完成人机交互

事件三要素：事件源、事件、事件处理程序（事件句柄–事件处理函数）

事件是一个过程，这个过程分为三个部分：

事件源（发生在谁身上）- 引发事件的元素

事件（用来记录发生事件时的相关信息）- 一般是动词

事件处理程序（发生了什么事）- 对事件处理的程序或函数

事件句柄是指事件发生时要进行的操作。（又称事件处理函数），每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句，从而实现网页内容与用户操作的交互。当浏览器检测到某事件发生时，便查找该事件对应的事件句柄有没有被赋值，如果有，则执行该事件句柄。

事件绑定

事件的绑定方法：

浏览器中的节点(节点).on事件名 = function(){ 要干什么？(放在浏览器中，不执行，当事件发生的时候再执行) }

三、常见的事件

JavaScript 可以处理的事件类型为**：鼠标事件、键盘事件、HTML 事件。**

PS：所有的事件处理函数都会都有两个部分组成，on+ 事件名称，例如 click 事件的事件处理函数就是：onclick。在这里，我们主要谈论脚本模型的方式来构建事件，违反分离原 则的内联模式，我们忽略掉。

1、鼠标事件

onclick：当用户单击鼠标按钮或按下回车键时触发

ondblclick：当用户双击主鼠标按钮时触发 - 连续点击两次

onmousedown：当用户按下了鼠标还未弹起时触发 - 弹窗测试最明显

onmouseup：当用户释放鼠标按钮时触发 - 鼠标抬起

onmouseover：当鼠标移到某个元素上方时触发  

onmouseout：当鼠标移出某个元素上方时触发  

onmousemove：当鼠标指针在元素上移动时触发  

2、键盘事件

onkeydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发  

onkeyup：当用户释放键盘上的键触发 - 当按键抬起时触发

onkeypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发  不能触发 例如：ALT, CTRL, SHIFT, ESC --- 不是字符键


不属于键盘事件 --- 属于事件对象

keyCode 返回当前按键的ASCII码  得知按下的键盘上的哪个键 - 要配合事件对象来使用。通过可以判断哪个键被按下

比如：判断y键有没有被按下

组合键：altKey、ctrlKey、shiftKey

案例：

1、使文本框输入不了数字

 //0键 ---> 48   9键 ---> 57
	onkeypress = function(e){
				//console.log(e.keyCode);
		if(e.keyCode>=48 && e.keyCode<=57){
					//阻止默认事件
			return false;
		}
	}

2、使div根据不同的方向键向不同的位置移动

<script type="text/javascript">
	var box = document.querySelector('.box');
			// 上38  下40  左37  you39
			// onkeydown =function(e){
				
			// 	console.log(e.keyCode);
			// }
onkeydown = function(e){
				 
switch(e.keyCode){
	case  38:
			box.style.top = box.offsetTop - 10 + 'px';
			break;
	case  40:
			box.style.top = box.offsetTop + 10 + 'px';
			break;
	case  37:
			box.style.left = box.offsetLeft - 10 + 'px';
			break;
	case  39:
			box.style.left = box.offsetLeft + 10 + 'px';
			break;  
		}
}
			
	</script>

3、html事件

onload：当页面完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发

onselect：当用户选中文本框(input 或 textarea)中的一个或多个字符触发

onselectstart：主要是用于禁止用户选中网页中的文字的默认行为

例如：
document.onselectstart = function(){
	return false;
}

onchange：当用户改变文本框(input 或 textarea)内容时且失去焦点后触发

onfocus：当页面或者元素获得焦点时触发

onblur：当页面或元素失去焦点时触发

onsubmit：当用户点击提交按钮在<form>元素上触发  

onresize：当窗口或框架的大小变化时在 window 或框架上触发

举例：window.onresize=function(){ alert(‘dw’); };

scroll：当用户滚动带滚动条的元素时触发

举例：window.onscroll=function() { alert(‘dw’); };

oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。

四、事件对象

1、什么是事件对象？

老大是浏览器

你是事件源；让你做的事是事件处理程序；走着去 是点击事件等

女秘书，就是事件对象，向你提供完成这件事的所有帮助

每做一件事，老大给配不同的秘书 / 每个事件都有不同的事件对象

通过这个故事可以得知：
1.事件有对象！叫事件对象(event)
2.事件对象是浏览器给的
3.事件对象不叫不出来

什么是event事件对象？

用来记录一些事件发生时的相关信息的对象，每次事件发生的时候，会在函数或方法内部产生一个事件对象，这个事件对象就是event。

特征：
1.只有当事件发生的时候才会产生，只能在处理函数内部访问
2.处理函数运行结束后自动销毁

2、获取方式（兼容问题）

怎么把贴身小秘书event叫出来呢？

如何获取event事件？
事件对象需要作为参数传入事件。

function fn(event){
	console.log(event)
}
或者
function(){
	console.log(arguments[0])
}

缺德定律再现！--- 什么东西好用，IE必定有兼容问题
IE中：          window.event
正常浏览器中：    对象.on事件 = function(event){}

兼容方式：
function fn(eve){
	var e = eve || window.event;
}


document.onclick = function(eve){
	var e = eve || window.event;
	console.log(e);
}

3、Event对象属性

标准：

clientX和clientY：鼠标距离窗口左边和上边的距离

pageX和pageY：鼠标距离网页左边和上边的距离（包含滚动距离）

screenX和screenY：距离屏幕左边和上边的距离

四、事件流

JS事件流最早要从IE和网景公司的浏览器大战说起，IE提出的是冒泡流，而网景提出的是捕获流，后来在W3C组织的统一之下，JS支持了冒泡流和捕获流，但是目前低版本的IE浏览器还是只能支持冒泡流(IE6,IE7,IE8均只支持冒泡流)，所以为了能够兼容更多的浏览器，建议大家使用冒泡流。

事件流：描述的就是从页面中接受事件的顺序。分为事件冒泡与事件捕获两种。

一个完整事件包含 捕获阶段 —> 目标阶段 —>冒泡阶段

五、事件冒泡

1.什么是事件冒泡？
当事件发生后，这个事件就要开始传播（从里向外或者从外向里）。

所以，当最里面的元素触发了事件的时候，会依次向上触发所有元素的相同事件（从触发事件的元素开始一直向上触发），但是事件冒泡对我们几乎没有任何好处，所以我们需要阻止事件冒泡。

怎么可能被你轻易阻止，缺德定律再次登场！

eve.stopPropagation();    方法  标准        
eve.cancelBubble = true;    属性    //兼容IE

兼容写法：
function stopBubble(e){
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
}

六、事件捕获

事件捕获的概念，与事件冒泡正好相反。它认为当某个事件发生时，父元素应该更早接收到事件，具体元素则最后接收到事件。