JavaScript学习(一)—处理事件
一.处理事件(一)
事件(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学习(一)—处理事件的更多相关文章
- JavaScript 学习(2)表单元素
##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...
- JavaScript学习(一) —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- JavaScript学习(3):函数式编程
在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...
- JavaScript学习(2):对象、集合以及错误处理
在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...
- JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JavaScript学习11 数组排序实例
JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...
- JavaScript学习10 JS数据类型、强制类型转换和对象属性
JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...
- JavaScript学习09 函数本质及Function对象深入探索
JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...
随机推荐
- 黑马程序员_ Objective-c 之block、protocol学习笔记
一):block学习总结 block :用来保存一段代码. 1.block 特点: 1> Block封装了一段代码,可以在任何时候执行 2> Block可以作为函数或者函数的返回值, ...
- Windows消息过滤
在C#编程中,经常会遇到一些场景,如禁止鼠标拖动窗体,启用某些快捷键,禁止鼠标移动等.遇到这些需求,可以通过窗体的MouseMove事件,OnDragDrop,OnMove等事件来解决问题, 但是该方 ...
- Bigendian 奇数内存地址取整形crash
在大端机器(solaris-sparc,hpux-hppa)上从奇数内存地址取一个整形(2 or 4 bytes)会崩溃.如: unsigned short Res = *(unsigned shor ...
- 转载:ActiveMQ的可靠性机制
1.JMS消息确认机制 JMS消息只有在被确认之后,才认为已经被成功地消费了.消息的成功消费通常包含三个阶段:客户接收消息.客户处理消息和消息被确认.在事务性会话中,当一个事务被提交的时候,确认自动发 ...
- printf()输出
printf()函数是式样化输出函数, 一般用于向准则输出设备按规定式样输出消息.正在编写步骤时经常会用到此函数.printf()函数的挪用式样为: printf("<式样化字符串&g ...
- Extjs 百度地图扩展
var bmapps; Bsprint.EditMapInfoWindow = Ext.extend(Ext.Window, { form: null, constructor: function ( ...
- ORM艰辛路之EF
经过一段时间对EF的研究,发现EF还是有很大的作用的,起码比自己写代码快捷许多.不过往往一个学习一个新东西开始都是简单的,后面才慢慢了解到它的许多不方便 优点: EF在对一个实体的增删改以及继承方面做 ...
- Django快速学习搭建blog项目
新手学习Django,本文学习的文档是<Django Web开发指南>.好了我也是新手,没什么好说了,go!- 首先先确定环境,我是在linux(Ubuntu14.04 gnome)下. ...
- git Could not read from remote repository 解决
错误: fatal: 'origin' does not appear to be a git repository fatal: Could not read from remote reposit ...
- 9、SQL Server 操作数据
插入数据 使用Insert Into 插入 if(exists(select * from sys.databases where name = 'webDB')) drop database web ...