JavaScript学习总结（九）事件详解

时间  2020-06-09
标签 javascript 学习 总结 事件 详解 栏目 JavaScript 繁體版
原文   原文链接

其实这篇文章挺早以前就写了，可是因为sf保存方面的bug，因此当时写了一大堆，结果没保存，以为这个没写完是个不小的遗憾，今天正好有空，就给补充下了，也正好给个人javascript学习总结作一个完结篇。javascript

其实以前的文章也涉及到部分事件，能够参照个人文章：JavaScript学习总结（三）BOM和DOM详解html

这里，主要讨论一下js相关的事件——java

事件处理程序

在DOM中定义了一些事件， 而响应某个事件的函数就叫事件处理程序（或事件侦听器）。事件处理程序的名字通常以“on”开头，例如：onclick等node

事件冒泡与捕获

事件流指的是页面中接收事件的顺序，IE，火狐和chrome浏览器都是事件冒泡，所谓是事件冒泡指的是事件最开始由最具体的元素接收，而后逐级向上传播到不具体的节点。而事件捕获则正好相反，事件捕获是由Netscape提出的，事件冒泡和捕获具体以下图所示：jquery

2012062314423159.png

虽然事件捕获是Netscape惟一支持的事件流模型，但目前IE9，火狐和谷歌也都支持这种事件流模型。正则表达式

事件冒泡的好处

由于事件具备冒泡机制，所以咱们能够利用冒泡的原理，把事件加到父级上，触发执行效果。这样作的好处固然就是提升性能了，chrome

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var aUl = document.getElementsById("bubble");
            var aLi = aUl.getElementsByTagName("li");

            for(var i = 0;i<aLi.length;i++){
                aLi[i].onmouseover = function () {
                    this.style.backgroundColor = "blue";
                };
                ali[i].onmouseout = function () {
                    this.style.backgroundColor = "";
                }
            }
        };
    </script>
</head>
<body>
<div>
    <ul id = "bubble">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
</body>

这样咱们就能够作到li上面添加鼠标事件。可是若是说咱们可能有不少个li用for循环的话就比较影响性能。
下面咱们能够用事件委托的方式来实现这样的效果。html不变:segmentfault

<script type="text/javascript">
    window.onload = function () {
        var aUl = document.getElementsById("bubble");
        var aLi = aUl.getElementsByTagName("li");
        
        //无论在哪一个事件中，只要你操做的那个元素就是事件源。
        // ie：window.event.srcElement
        // 标准下:event.target
        aUl.onmouseover = function (ev) {
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;

            if(target.nodeName.toLowerCase() == "li"){
                target.style.background = "blue";
            }
        };
        aUl.onmouseout = function (ev) {
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;

            if(target.nodeName.toLowerCase() = "li"){
                target.style.background = "";
            }
        }
        };
</script>

那么，如何阻止事件的冒泡呢，看下面一个例子：数组

<div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认状况对比）
function showMsg(obj,e)
{
    alert(obj.id);
    stopBubble(e)
}

//阻止事件冒泡函数
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
</script>

点击黑色外围的效果图：浏览器

图片描述

DOM 0级事件处理程序

经过js指定事件处理程序一般是将回调函数赋给这个事件处理程序的属性。每一个元素都有本身的事件处理程序属性（属性小写，例如：onclick）

btn.onclick = function(){
    console.log('hello');
};

使用DOM 0级指定的事件处理程序被认为是元素的方法。所以，this指向当前元素：

var btn = document.getElementById('myDiv');

//DOM上触发的事件会产生一个事件对象event
btn.onclick = function (event) {
    alert(this.id);//myDiv  
};

DOM level 1

DOM level 1 专一于 HTML 和 XML 文档模型。它含有文档导航和处理功能。

DOM level 1 于 1998 年 10 月 1 日成为 W3C 推荐标准。

第二版的工做草案在 2000 年 9 月 29 日。

值得一提的是：DOM level 0 并非 W3C 规范。而仅仅是对在 Netscape Navigator 3.0 和 IE 3.0 中的等价功能性的一种定义。

DOM 2级事件处理程序

DOM 2级定义了两个方法，用于指定和删除事件处理程序的操做：addEventListener()和removeEventListener()，他们都接受三个参数：

1.事件名。好比上面的click
2.做为事件处理程序的函数。
3.布尔值（true表示捕获阶段调用事件处理程序，false表示冒泡阶段）

经过Element对象的addEventListener方法，也能够定义事件的回调函数。

//element.addEventListener(event, function, useCapture) 

var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
    console.log(this.id);
},false);

IE中的事件处理程序

IE9以前的IE浏览器不支持addEventListener()和removeEventListener（）。
与其余浏览器不一样的是，IE使用的是attachEvent()和detachEvent()方法来为DOM添加事件处理程序，因为IE8及更早版本只支持事件冒泡，因此他们只接受两个参数：

一、事件处理程序名称（前面要加on）
二、事件处理程序函数

使用attachEvent()添加的事件处理程序以下：

var btn = document.getElementById('myDiv');
btn.attachEvent('onclick', function () {
    console.log(this.id);
});

值得注意的是，使用attachEvent()方法的状况下，事件处理程序会在全局做用域中运行，因此，此时this等于window

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着全部与事件相关的信息。包括致使事件的元素、事件的类型以及其余与特定事件相关的信息。event对象会被做为第一个参数传递给事件监听的回调函数。咱们能够经过这个event对象来获取到大量当前事件相关的信息：

type (String) — 事件的名称
target (node) — 事件起源的DOM节点
currentTarget?(node) — 当前回调函数被触发的DOM节点（后面会作比较详细的介绍）
bubbles (boolean) — 指明这个事件是不是一个冒泡事件（接下来会作解释）
preventDefault(function) — 这个方法将阻止浏览器中用户代理对当前事件的相关默认行为被触发。好比阻止<a>元素的click事件加载一个新的页面
cancelable (boolean) — 这个变量指明这个事件的默认行为是否能够经过调用event.preventDefault来阻止。
stopPropagation (function) — 取消事件的进一步捕获或冒泡，bubbles为true使用这个方法
eventPhase：返回一个数字，表示事件目前所处的阶段，0为事件开始从DOM表层向目标元素传播，1为捕获阶段，2为事件到达目标元素，3为冒泡阶段。

此外，事件对象还可能拥有不少其余的属性，可是他们都是针对特定的event的。好比，鼠标事件包含clientX和clientY属性来代表鼠标在当前视窗的位置。

另外，stopPropagation()方法用于当即中止事件在DOM中的传播，即取消进一步的事件冒泡或捕获。

var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
    alert("clicked");
    event.stopPropagation();
};

//避免触发在document.body上的事件处理程序
document.body.onclick = function (event) {
    alert("Body clicked");  
};

只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序执行完毕，event对象就会自动销毁。

IE中的事件对象

在DOM 0级中添加事件处理程序时，event对象是做为window对象的一个属性存在的：

var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
    var event = window.event;
    alert(event.type);//click
};

IE 的event对象一样也包含与建立它的事件相关的属性和方法。

cancleBubble 布尔   默认值时false，但能够被设置成true来取消事件冒泡，与dom中的 stopPropagation()方法相同。
returnValue  布尔    默认值是true，当设置成false时用以取消事件的默认行为 与dom中的preventDefault（）相同。
srcElement　 元素  　　事件的目标，与dom中的target属性相同。
type　　　　　字符串   被触发的事件类型。

click事件

当用户点击之后，event对象会包含如下属性。

pageX，pageY：点击位置相对于html元素的坐标，单位为像素。
clientX，clientY：点击位置相对于视口（viewport）的坐标，单位为像素。
screenX，screenY：点击位置相对于设备显示屏幕的坐标，单位为设备硬件的像素

clientX，clientY

图示：clientX和clientY，他们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标（不包含滚动条区域）
图片描述

偏移量

经过如下4个属性能够取得元素的偏移量。

   （1）offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。

   （2）offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。

   （3）offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

   （4）offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

pageX，pageY

这两个属性表示鼠标光标在页面中的位置，在页面没有滚动的状况下，pageX，pageY的值与clientX，clientY的值相等

滚动大小

滚动大小，指的是包含滚动内容的元素的大小。

如下是4个与滚动大小相关的属性。

   （1）scrollHeight：在没有滚动条的状况下，元素内容的总高度。

   （2）scrollWidth：在没有滚动条的状况下，元素内容的总宽度。

   （3）scrollLeft：被隐藏在内容区域左侧的像素数。经过设置这个属性能够改变元素的滚动位置。

   （4）scrollTop：被隐藏在内容区域上方的像素数。经过设置这个属性能够改变元素的滚动位置。

焦点事件

焦点事件会在页面元素得到或失去焦点时触发，有如下4个焦点事件：

1. blur：元素失去焦点时触发，该事件不冒泡
 2. focus：元素得到焦点时触发。不冒泡
 3. focusin：元素得到焦点时触发，冒泡
 4. focusout：元素失去焦点时触发，冒泡

鼠标事件

DOM 3级定义了9个鼠标事件：

click：当用户点击鼠标主键一般是指鼠标左键或按回车键时触发。

dbclick：用户双击鼠标时触发

mousedown：当用户按下鼠标任意一个键都会触发，这个事件是不可以经过键盘触发的。

mousemove：当鼠标在某元素周围移动时重复触发，该事件不能经过键盘事件触发。

mouseout：当鼠标离开元素时触发，这个事件不能经过键盘触发。

mouseover：当鼠标进入元素时触发，这个事件不可以经过键盘触发。
 mouseenter：相似“mouseover”，但不冒泡，并且当光标移到后代元素上不会触发。 

mouseleave：相似“mouseout”，但不冒泡。在元素上方是不触发。

mouseup：当用户释放鼠标按键时触发，不可以经过键盘触发。


传递给鼠标事件处理程序的事件对象有clientX和clientY属性，它们指定了鼠标指针相对于包含窗口的坐标。加入窗口的滚动偏移量，就能够把鼠标位置转换成文档坐标。

　　页面上的全部元素都支持鼠标事件。除了mouseenter和mouseleave外，全部的事件都冒泡，而且他们的默认行为是能够被取消掉的。但取消鼠标事件的默认行为可能会影响到其余事件，由于有些鼠标事件是相互依赖的。

mouseenter和 mouseover的不一样：
http://www.w3school.com.cn/ti...

拖拉事件

（1）drag事件

drag事件在源对象被拖拉过程当中触发。

（2）dragstart，dragend事件

dragstart事件在用户开始用鼠标拖拉某个对象时触发，dragend事件在结束拖拉时触发。

（3）dragenter，dragleave事件

dragenter事件在源对象拖拉进目标对象后，在目标对象上触发。dragleave事件在源对象离开目标对象后，在目标对象上触发。

（4）dragover事件

dragover事件在源对象拖拉过另外一个对象上方时，在后者上触发。

（5）drop事件

当源对象被拖拉到目标对象上方，用户松开鼠标时，在目标对象上触发drop事件。

相关文章

  1. JavaScript学习总结（一）基础部分
  2. JavaScript学习总结（二）数组和对象部分
  3. JavaScript学习总结（三）BOM和DOM详解
  4. JavaScript学习总结（四）function函数部分
  5. JavaScript学习总结（五）原型和原型链详解
  6. JavaScript学习总结（六）数据类型和JSON格式
  7. JavaScript学习总结（七）Ajax和Http状态字
  8. JavaScript学习总结（八）正则表达式
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程