一.处理事件(一)

事件event是用户在访问页面时执行的操作。提交表单和在图像上移动鼠标就是两种事件。当浏览器探测到一个事件时,比如用鼠标单击或按键,它可以触发与这个事件相关联的JavaScript 对象,这些对象称为事件处理程序eventhandler或者叫做事件侦听器。

1. 设置HTML标签属性为事件处理程序(避免使用)

1)直接将JS代码写在HTML

<p onclick="alert('click')">HTML事件处理程序</p>

2)定义一个函数,赋值给html元素的onXXX属性

<script type="text/javascript">
function alert (){};
</script>
<div onclick=" alert ()">HTML事件处理程序</div>

暴露出来HTML事件处理程序的很多问题:

(1)HTML代码与JavaScript代码紧密的耦合在一起,如果要更换事件处理程序,就要改动两个地方:html代码和JavaScript代码。

(2)扩展事件处理程序的作用域链在不同浏览器当中会导致不同的结果。(暂时没看懂,可参考文章SJ9009: 元素的内联事件处理函数的特殊作用域链在各浏览器中存在差异

(3)存在一个时差问题。如果存放在函数当中,那么,会面临一个问题——当函数还没有被定义(当时的事件处理程序有可能尚不具备执行条件,该事件处理程序可能在js脚本内,还没有被解析),只是HTML、CSS代码加载完毕,用户进行点击,会完全没有反应。为此,很多HTML事件处理程序都会被封装在一个try-catch块中,以便错误不会浮出水面,如下面的例子所示:

<input type="button" value="Click me" onclick="try{showMessage();}catch(ex){}" />

(4)若给同一元素写多个onclick事件处理属性,浏览器只执行第一个onclick里面的代码,后面的会被忽略;

2. DOM0级事件处理程序(所有的浏览器都支持DOM0 级事件处理程序。)

可以直接设置 DOM 属性来指定某个事件对应的处理函数

例如:

<div id="d3">Div3 Element</div>
<script type="text/javascript">
//获取对象
var d3 = document.getElementById('d3');
//单击事件
d3.onclick = function(){alert("clicked"); }
</script>

就是监听 element 节点的 click 事件。

在这些代码运行以前不会指定事件处理程序,因此如果这些代码在页面中位于按钮后面,就有可能在一段时间内怎么单击都没有反应。(代码还没有加载)。(放在前面就找不到d3了)

使用DOM0级方法指定的事件处理程序被认为是元素的方法。

 btn.onclick=null;  //删除事件处理程序

将事件处理程序设置为null之后,再单击按钮将不会有任何动作发生。

【缺点】
1.如果代码位于按钮后面,就有可能一段时间内怎么单击都没有反应。
2.当同一个对象使用.onclick的写法触发多个方法的时候,后一个方法会把前一个方法覆盖掉。也就是说,在对象的onclick事件发生时,只会执行最后绑定的方法。而是用事件监听则不会有覆盖的现象,每个绑定的事件都会被执行。但是IE家族先执行后绑定的方法,也就是逆绑定顺序执行方法,其他浏览器按绑定次数顺序执行方法。

3. DOM2级事件处理程序
“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()
1)addEventListener

element.addEventListener(<event-name>, <callback>, <use-capture>);

参数一 :event-name 事件名称或类型
参数二:callback 回调函数,会在事件触发的时候被调用。
参数三:use-capture表示该事件监听是在“捕获”阶段中监听(设置为 true)还是在“冒泡”阶段中监听(设置为 false)。

<button id="btn">点击这里</button>

var btn = document.getElementsByTagName('button');
btn.addEventListener('click', function() {
alert('你点击了这个按钮');
}, false);

2) removeEventListener

如果我们想解除绑定,需要使用 removeEventListener 方法:

element.removeEventListener(<event-name>, <callback>, <use-capture>);

需要注意的是,绑定事件时的回调函数不能是匿名函数,必须是一个声明的函数,因为解除事件绑定时需要传递这个回调函数的引用,才可以断开绑定。例如:

var fun = function() {
// function logic
}; element.addEventListener('click', fun, false);
element.removeEventListener('click', fun, false);

特点:

1)只有运行完addEventListener()才为元素绑定了事件处理程序。
2)可以为同一个元素绑定多个事件处理程序,通过addEventListener()方法给同一对象注册多个同类型的事件,并不会发生忽略或覆盖,而是会按顺序依次执行;这是DOM0 级事件处理程序不支持的哦~ DOM0 级只能添加一个事件处理程序,后添加的会覆盖先添加的。
3)使用AddEventLister()添加的事件处理程序只能使用removeEventLister()来移除。且保持参数相同。
4)IE9、Firefox、Safari、Chrome和Opera都支持DOM2 级事件处理程序, addEventListener()方法不支持IE9(不包含IE9)以下的浏览器。

4. IE事件处理程序

IE8以及其之前版本的浏览器并不支持addEventListener()和removeEventListener()。但是,IE定义了类似的方法attachEvent()和detachEvent()。
attachEvent()和detachEvent()要求只有两个参数:事件类型和事件处理函数。
注:IE10及之前版本支持attachEvent()和detachEvent()方法,IE11不再支持,一般IE9及以上都使用DOM方法,这两个方法仅对IE8及以下版本使用。支持IE事件处理的只有IE和Opera

添加事件处理程序:

var btn = document.getElementById('myBtn');
btn.attachEvent('onclick', function () { // 注意这里是 onclick 哦~
console.log('hello');
});

移除事件处理程序:

使用detachEvent移除事件处理程序的条件与DOM方法相同——必须提供相同的参数,从而添加的匿名函数也无法被移除。

var btn = document.getElementById('myBtn');
btn.detachEvent('onclick', show);

特点:

1)只有运行完attachEvent()才为元素绑定了事件处理程序。
2)可以为同一个元素绑定多个事件处理程序,绑定的事件处理程序会按照它们添加顺序的相反次序被触发,即先添加后执行,后添加的先执行

注意:本文为原创,转载请以链接形式标明本文地址 ,谢谢合作。

本文地址:http://www.cnblogs.com/wanghuih/p/5611682.html

JavaScript学习(一)—处理事件的更多相关文章

  1. JavaScript 学习(2)表单元素

    ##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...

  2. JavaScript学习(一) —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  3. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  4. JavaScript学习(3):函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

  5. JavaScript学习(2):对象、集合以及错误处理

    在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

  6. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  7. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  8. JavaScript学习11 数组排序实例

    JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...

  9. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  10. JavaScript学习09 函数本质及Function对象深入探索

    JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...

随机推荐

  1. Python操作Excel之xlrd

    import xlrdworkbooks=xlrd.open_workbook("test.xlsx")print(workbooks.sheet_names())#获取sheet ...

  2. 增强VPS SSH账号安全:改端口,禁用Root,密钥登录,Denyhosts防暴力攻击

    VPS SSH账号是我们日常管理VPS的主要登入方式,尤其是Root账号,对Linux系统安全至关重要.以前好多站长喜欢用Putty中文版,这实际是别人修改官方Putty汉化而来,这些软件被植入了后门 ...

  3. C/C++二维数组分配内存

    //C++方式 double **Q=new double*[row];    //初始化Q矩阵 for(int i=0;i<row;++i) Q[i]=new double[POS_NUM]( ...

  4. bottlepy template

    bottle template usage 1 example 使用bottle模板,最简单的方法是使用template函数或view装饰器 1.1 template 函数 例子如下: from bo ...

  5. 第三章 Git的入门 - 读书笔记

    Android驱动月考3 第三章 Git的入门 - 读书笔记 对于Github,这是全世界最大的开源平台,你可以把你做的项目在这里开源,把你发现的一些新技术在这里开源,向全世界的开发者们分享,大家都彼 ...

  6. JAVA数据压缩简单测试

    本段代码只是做了简单的测试,看是否可行,此处仅作笔记.适应用场合,比如数据库,数据缓存.压缩解压肯定是有资源消耗的! 当数据小于500byte时就没有压缩的必要了 @Test public void ...

  7. 二模14day2解题报告

    T1.砍树(cuttree) 给出n棵树,要锯下m米木材,现在有一个高度h,h以上所有木头都砍下来,求满足m米的最小h 很简单的二分答案判断可行性. T2.快速求和(quicksum) 给出数字串s, ...

  8. 关于C#本质论和CLR via C#中译本,不吐不快

    C#本质论和CLR via C#两本好书,周老师可能是俗务缠身,太忙了吧,翻译得只能让人呵呵了. 你要是忙,别接那么多活好不啦. 现在都在说供给侧改革,都在大力提倡工匠精神,我们做技术的,还是踏实点好 ...

  9. 关于NK3C使用富文本编辑器(CKEditor)发送HTML邮件的使用说明

     目前NK3C发送HTML邮件使用的的编辑器是CKEditor4.6版本,关于CKEditor的使用说明如下:   1.依赖JQuery1.7版本以上,在xxx.vm中<head>< ...

  10. VA的自动补全Snippet

    开始旅程 如果您想要自定义补全,比如在使用UE4框架时,想输入一个方法的注释模板,可以这么做. 方法1:点击VAssistX -> insert VA Snippet -> Edit VA ...