《javascript高级程序设计》之事件

Render 发布于2019-08-26 11:51 / 3286人阅读

摘要：特性这样指定事件处理程序具有一些独到之处。级事件处理程序通过获得要操作对象的引用，用把一个函数赋值给一个事件处理程序属性，比如。以这种方式添加的事件处理程序会在事件流的冒泡阶段被捕获。级事件处理程序级事件定义了两个方法，。

一、事件处理程序

响应某个事件的函数叫做事件处理程序（或事件侦听器），为事件指定处理程序的方式有下面几种。

1、html特性

这样指定事件处理程序具有一些独到之处。
(1)、首先会创建一个封装着元素属性值的函数。这个函数中又一个局部变量event，也就是事件对象。（这个函数，你是看不见的，是在系统执行的时候动态自动创建的。）
(2)、关于这个动态创建的函数，另一个有意思的地方就是它扩展作用域的方式：

function(){
    with(document){
        with(this){
            ...//直接访问元素的属性值，比如name，value等
        }
    }
}

因此，事件处理程序要访问自己的属性就不需要this指明了，直接访问就好。如果当前元素是一个表单元素，则作用域中还会包含表单元素（form），也就是说，你也可以直接访问form里的其它元素属性，比如username.value，username是另一个表单元素的name值。
这样指定事件处理程序缺点：(1)、存在一个时差问题，比如，事件处理程序里调用了一个方法，但这个方法在这个元素渲染出来时还没有加载进来，那这个时候触发事件就会出错。
(2)、这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果。
(3)、html和javascript的紧密耦合，如果要修改事件处理程序会很麻烦。

2、DOM 0 级事件处理程序

通过javascript获得要操作对象的引用，用js把一个函数赋值给一个事件处理程序属性，比如onclick。

var btn=document.getElementById("myBtn");
btn.onclick=function(){
    alert("clicked");
}

这样指定的事件处理程序的this是指向元素本身的，因此可以this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被捕获。如果要删除事件处理程序，只需要将这个属性（onclick）的值设为null。

3、DOM 2 级事件处理程序

“DOM2级事件”定义了两个方法：addEventListener() ，removeEventListener() 。所有的DOM节点都包含这两个方法。

var btn=document.getElementById("myBtn");
btn.addEventListener("click",function(){
    alert(this.id);
},false);

第三个参数是一个布尔值，如果是true，表示在捕获阶段调用事件处理程序；false，是在冒泡阶段。
这样指定的事件处理程序也是在其依附的元素的作用域中运行。使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。

4、IE事件处理程序

IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接收相同的两个参数：事件处理程序名称与事件处理程序函数。注意：事件处理名称和addEventListener有区别，addEventListener是“ click ”，attachEvent是“ onclick ”。IE早期只支持事件冒泡，所以它的事件处理程序都被添加到冒泡阶段。
IE的attachEvent与其它方法的主要区别是事件处理程序的作用域。其它方法的作用域都是其所属元素；使用attachEvent的作用域是全局作用域，即：this等于window。
与DOM2级方法的区别是：事件处理程序不是以添加他们的顺序执行，而是以相反的顺序被触发。DOM2级是以添加他们的顺序执行的。

5、以上所以事件处理程序的总结

无论指定事件处理程序的方法是哪种，浏览器都会将一个event对象传入到事件处理程序中。

var btn=document.getElementById("myBtn");
btn.onclick=function(e){
    alert(e.type);      //"click"
}
btn.addEventListener("click", function(e){
    alert(e.type);
}, false);

超融合服务器云服务器高级javascript程序设计 javascript高级程序设计 javascript高级程序 javascript高级程序设计pdf

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

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

javascript高级程序设计（第3版）之《script元素》

摘要：表示要执行外部文件的路径或链接。由于规范要求脚本按照他们出现的先后顺序执行，因此第一个延迟脚本会优先于第二个执行，二这两个脚本会优先于事件执行。无论使用任何方式，只要不存在和属性，浏览器都会按照元素在页面中出现的先后顺序依次解析。元素属性属性定义 async 【可选】。可以异步加载，表示可以立即下载此脚本，但不影响页面其他操作。只对外部脚本有效。 charset ...

miqt 2019-08-22 14:04 评论0 收藏0
javascript知识点

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

Karrdy 2019-08-26 11:34 评论0 收藏0
读书笔记(03) - 性能 - JavaScript高级程序设计

摘要：作用域链查找作用域链的查找是逐层向上查找。而全局变量和闭包则会与之相反，继续保存，所以使用用后需手动标记清除，以免造成内存泄漏。获取元素的属性获取元素的属性等参考文档高级程序设计作者以乐之名本文原创，有不当的地方欢迎指出。 showImg(https://segmentfault.com/img/bVburXV?w=500&h=399); 作用域链查找作用域链的查找是逐层向上查找。查...

warnerwu 2019-08-23 13:52 评论0 收藏0