JS基础之事件概念篇

DrizzleX 发布于2019-08-23 14:03 / 506人阅读

摘要：通过侦听器来预定事件，以便事件发生时执行相应的代码。另外级事件和事件对事件的执行顺序是不一样的，是按照事件的添加顺序来触发处理程序，而则是先触发后添加的事件侦听器，即与相反。

JS与HTML的交互是通过事件来实现的。通过侦听器来预定事件，以便事件发生时执行相应的代码。这些侦听器用于为事件处理程序属性赋值处理函数、可以是addEventListener，也可以是attachEvent，后边将详细讲述。

事件流

首先需要了解一下事件流，所谓事件流就是页面接收事件的顺序。DOM2规定了事件流有三个阶段，捕获阶段、处于目标极端和事件冒泡阶段。也就是说较为不具体的节点先收到事件（例如document），一层一层往下传播事件，直到到达目标元素。我们可以根据需要在捕获阶段拦截事件，但是一般情况下我们依旧在冒泡阶段处理事件。需要注意的是IE的事件冒泡是说事件从目标元素开始一层一层网上传播事件，直到遇到document。

事件处理程序

接收到了事件，我们要对它做出相应的处理，这就用到了事件处理程序，其实就是一个函数。
事件处理程序可以是直接以标签onclick属性值存在的一段代码，我们称之为HTML事件处理程序，这种事件处理程序在执行的时候会扩大作用域，可以访问document和自身的成员，如果目标元素是表单，还能访问父元素form中的其他元素。其扩展作用域方法为：

function(){
    with(document){
        with(this){
            //元素属性
        }
    }
}

DOM先后提出了DOM0和DOM2级的事件处理程序，DOM0级是通过JavaScript指定事件处理程序的传统方式，即给事件处理程序属性赋值函数。DOM0级的事件处理程序被认为是元素的方法，因而在元素的作用域中执行。

var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
    alert(this.id);  //myBtn
}

DOM2级的事件处理程序指定了两个方法：addEventListener和removeEventListener，他们接收3个参数，分别是事件名、作为事件处理程序的函数，一个布尔值，这个布尔值为true时指定了在捕获事件阶段调用事件处理程序，一般情况下为false，即在事件冒泡阶段调用事件处理程序。
前边说到了IE的事件流是事件冒泡，那么第三个参数就不需要了，在IE事件处理程序中指定了类似的两个方法：attachEvent和detachEvent。DOM2级事件和IE事件都可以为目标元素添加多个事件处理程序，而DOM0级则只能指定一个事件处理程序。另外DOM2级事件和IE事件对事件的执行顺序是不一样的，DOM2是按照事件的添加顺序来触发处理程序，而IE则是先触发后添加的事件侦听器，即与DOM2相反。
另外值得提一下的是IE的attachEvent与DOM0、DOM2级方法的事件处理程序的作用域不一样，前者会在全局作用域中执行，而后者在当前元素的作用域内执行。

var btn = document.getElementById(“myBtn”);
var handle = function(){
    alert(this === window);    //true
}
btn.attachEvent(“onclick”, handle );

因而在自己编写跨浏览器的事件处理程序时要注意一下IE的作用域的问题，以及DOM0只能支持一个时间处理程序。

海外云主机 GPU服务器之基础篇 js绑定事件基础基础篇 java语言程序设计基础篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100008.html

前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
【连载】前端个人文章整理-从基础到入门

摘要：个人前端文章整理从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 个人前端文章整理从最开始萌生写文章的想法，到着手...

madthumb 2019-08-23 14:15 评论0 收藏0
javascript知识点

摘要：模块化是随着前端技术的发展，前端代码爆炸式增长后，工程化所采取的必然措施。目前模块化的思想分为和。特别指出，事件不等同于异步，回调也不等同于异步。将会讨论安全的类型检测惰性载入函数冻结对象定时器等话题。 Vue.js 前后端同构方案之准备篇——代码优化目前 Vue.js 的火爆不亚于当初的 React，本人对写代码有洁癖，代码也是艺术。此篇是准备篇，工欲善其事，必先利其器。我们先在代...

Karrdy 2019-08-26 11:34 评论0 收藏0
JS基础篇--JS之onunload、onbeforeunload事件详解

摘要：事件事件在用户退出页面时发生。注意事件同样触发了页面载入事件事件。如图所示大体一句话描述和支持事件但是或者不支持该事件。浏览器兼容情况完美支持不支持文字提醒信息不支持如图所示使用遇到的凡是标签都会触发事件包括这种。简介 onunload，onbeforeunload都是在刷新或关闭时调用，可以在脚本中通过 window.onunload来调用。区别在于onbeforeunload在o...

rollback 2019-08-21 17:26 评论0 收藏0