笔记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;
}
}
六、事件捕获
事件捕获的概念,与事件冒泡正好相反。它认为当某个事件发生时,父元素应该更早接收到事件,具体元素则最后接收到事件。