JavaScript中的几种事件

事件:用户与浏览器发生交互的瞬间,称为事件

事件流 : 描述事件传递的顺序
冒泡流 : 从最具体的元素传递到最不具体的元素(document,IE提出的)

捕获流 : 从最不具体的元素传递到最具体的元素(淘汰了,网景提出)

1.png

DOM事件流:

DOM对象是操作文档的接口

DOM事件分为:DOM0级和DOM二级事件

DOM0级事件:

添加DOM0级事件方式

 //添加点击事件
 
 目标元素.onclick = function() {
    事件处理代码
 }

移除DOM0级事件

目标元素.onclick = null;

DOM 0 级添加 : 一个事件只能添加一个事件处理程序,多个会覆盖

DOM2级事件:

添加DOM2级事件方式

目标元素.addEventListener(事件名称, 处理程序, 是否在捕获阶段触发(布尔值));

移除DOM2级事件需要三个参数恒相等

目标元素.removeEventListener(事件名称, 处理程序, 是否在捕获阶段触发(布尔值));

DOM2级事件传递经历以下三个阶段,也是事件监听

            a:捕获阶段
            b:处于自身阶段

            c:冒泡阶段


规范:禁止在捕获阶段触发事件(尽量减少捕获阶段添加事件处理程序),浏览器私下支持了在捕获阶段触发事件.

一个事件类型可以添加多个事件处理程序

事件委托:

把原本自己的事件委托给父级完成

节省资源浪费,减少内存开销

box.onclick = function(e) {
e = e || window.event;
//获取目标源
var target = e.target || e.srcElement;
console.log(target);
if(target.nodeName == 'LI') {
alert(target.innerHTML)
}
}


鼠标事件:

mousedown  //鼠标按下

mouseup  //鼠标抬起

mousemove  //鼠标移动

// 所有子元素也会触发该事件
mouseover //移入
mouseout  //移出

// 只有本元素会触发
mouseenter //移入
mouseleave //移出

获取鼠标位置

//真实距离
e.pageX
e.pageY

//距离浏览器窗口
e.clientX
e.clientY

//相对于元素本身
e.offsetX
e.offsetY

文本框常用事件:

focus //获取焦点

blur  //失去焦点

change  //当文本框失去焦点,如果文本框的值跟上比较发生了改变,才触发

input  //文本框的值发生改变,立即触

键盘事件:

onkeydown  //键盘按下
onkeyup    //键盘抬起
keypress  //键盘按下

获取按键

返回当前按下对应的按键的ASCII编码

var keyCode = e.keyCode || e.which; //兼容写法


onkeypress 和 onkeydown 是有区别,下面将讲解 onkeypress 与 onkeydown 事件的区别。 
onkeypress 事件在用户按下并放开任何字母数字键时发生。但是系统按钮(例如:箭头键、功能键)无法得到识别。 
onkeydown 事件在用户按下任何键盘键(包括系统按钮)时发生。 
具体区别: 
1. 一个放开一个没有放开,onkeydown 先于 onkeypress 发生。 
2.onkeypress 无法系统按钮。 
2.onkeydown 捕获的 keyCode 不区分字母大小,而 onkeypress 区分。 

onkeypress是在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能键)无法得到识别。 
onkeyup 是在用户放开任何先前按下的键盘键时发生。 
onkeydown 是在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。

注意 在所有浏览器中 onkeypress 事件不是适用于所有按键(如: ALT, CTRL, SHIFT, ESC)。监听一个用户是否按下按键请使用 onkeydown 事件,所有浏览器都支持 onkeydown 事件。




版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论

精彩评论
  • 2019-03-15 11:10:03

    谢谢分享 ,会一直关注博主的,内容很赞

Top

分享: