事件处理程序
来源:互联网 发布:平板打不开淘宝视频 编辑:程序博客网 时间:2024/05/21 22:25
事件就是用户或浏览器自身只i系那个的某种动作,诸如click、mouseover和mouseout等,都是事件的名称。而响应某个事件的函数就叫做事件处理程序(或事件侦听器)。事件处理程序的名字以“on”开头。
**
HTML事件处理程序
**
某个元素支持的每种事件,都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。如:
<input type="button" value="Click me" onclick="alert('Clicked');"/>
这样指定事件处理程序具有一些独特之处。首先,这样会创建一个封装着元素属性值的函数,这个函数有一个局部变量event,也就是事件对象。在函数内部,this值就等于事件的目标元素。
在HTML中定义的事件处理程序可以包含要执行的具体动作,也可以调用在页面其他地方定义的脚本。如:
function showMessage(){ alert("Hello World!");}<input type="button" value="Click me" onclick="showMessage()" />
在HTML中指定事件处理程序有两个缺点:
- 存在一个时差问题。用户可能在HTML元素一出现在页面上就触发相应的事件,但当时事件处理程序可能还未被解析。
- HTML与JavaScript代码紧密。
**
DOM0事件处理程序(所有浏览器都支持)
**
通过JavaScript指定事件处理程序的传统方式,就是将一个函数赋值给事件处理程序属性。要使用JavaScript指定事件处理程序,首先必须取得一个要操作的对象的作用。如:
var btn = document.getElementById("myBtn");btn.onclick = function(){ alert("Clicked");}
使用DOM0级方法指定的事件处理程序被认为是元素的方法,因此,这时候的事件处理程序是在元素的作用域中运行;换句话说,程序中的this引用当前元素。
将事件处理程序属性的值设置为null即可将DOM0级方法指定的事件处理程序删除。如:
btn.onclick = null;
虽然所有浏览器都支持DOM0级事件处理程序,但是却存在一个问题,就是不能为一个元素添加多个同类型事件。
**
DOM2级事件处理程序(IE9之后开始支持)
**
addEventListener()和removeEventListener()
接收3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值;最后这个布尔值参数如果为true,表示在捕获阶段调用事件处理程序,如果为false,表示在冒泡阶段调用事件处理程序。如:
var btn = document.getElementById("myBtn");btn.addEventListener("click",function(){ alert(this.id);},false);
使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序,按照添加的顺序触发。如:
var btn = document.getElementById("myBtn");btn.addEventListener("click",function(){ alert(this.id);},false);btn.addEventListener("click",function(){ alert("Hello World!");},false);先显示元素的id,其次显示"hello world!"信息
**
IE事件处理程序(只有IE和Opera支持)
**
attachEvent()和detachEvent()
接收2个参数:事件处理程序名称(以on开头)与事件处理程序函数。如:
var btn = document.getElementById("myBtn");btn.attachEvent("onclick",function(){ alert("Clicked");});
在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此,this等于window。attachEvent()也可以用来为一个元素添加多个事件处理程序。
**
跨浏览器的事件处理程序
**
兼容方法:
var EventUtil = { //添加事件处理程序 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent) { element.attachEvent("on"+type,handler); }else { element["on"+type] = handler; } }, //移除事件处理程序 removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent) { element.detachEvent("on"+type,handler); }else { element["on"+type] = null; } }}
- 事件---事件处理程序
- js--事件--事件处理程序
- 事件处理程序&&事件对象
- js--事件--事件处理程序
- 事件处理程序/事件侦听器
- 事件处理程序
- ADO 事件处理程序
- IE事件处理程序
- 事件处理程序
- 注册事件处理程序
- js 事件处理程序
- 按钮事件处理程序
- 简单事件处理程序
- 事件与处理程序
- 按钮事件处理程序
- 键盘事件处理程序
- JavaScrpit事件处理程序
- 事件处理程序WinProc
- 如何让你的paper被拒
- 第八周--项目5-计数的模式匹配
- Spring中所用到的设计模式
- 第七周项目五 排队看病模拟
- 【第八周项目1- 建立顺序串的算法库】
- 事件处理程序
- 在安装apache2,php,mysql开发环境中的一些问题
- 第八周项目一~数据结构之自建算法库——顺序串
- JavaScript Math对象 ceil()、floor()、round()方法
- fresco加载图片
- Microsoft Office Project 2016使用心得(一)
- 高仿网易评论列表效果之数据准备
- C/C++ typedef用法详解
- 当Androidstudio出现Instant Run requires 'Tools | Android | Enable ADB integration' to be enabled 时的解决办法