数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

JavaScript常见事件处理程序实例总结

来源:脚本之家  责任编辑:小易  

本文实例总结了JavaScript常见事件处理程序。分享给大家供大家参考,具体如下:

事件指的是使用者或者浏览器自身执行的某种动作(比如点击事件)。响应这些事件的函数就叫做事件处理程序(或者叫事件监听器)。事件处理程序的名字以“on”为前缀,比如 click 事件的事件处理程序就是 onclick。

1 HTML 事件处理程序

如果某个元素支持某个事件,那么它都有一个与相应的事件处理程序同名的 HTML 属性,我们可以通过这个属性来指定 JS:

<input type="button" value="点我" onclick="alert('点击过咯')"/>

因为这里的脚本是嵌入在 HTML 元素的属性中,所以使用了单引号!

也可以调用在页面的其他地方定义的脚本:

<input type="button" value="Click me" onclick="showMessage()">
<script type="text/javascript">
  function showMessage() {
    console.log("Hello World!");
  }
</script>

事件处理程序的代码在执行时,可以访问到全局作用域中的任何代码!

这样指定的事件处理程序,会创建一个封装着元素属性值的函数,它有一个局部变量 event,就是事件对象:

<input type="button" value="点我" onclick="alert(event.type)"/>

通过 event 变量,可以直接访问事件对象。在这个函数内部,this 值等于事件的目标元素:

<input type="button" value="点我" onclick="alert(this.value)"/>

可以通过这个动态创建的函数,来扩展它的作用域。在这个函数内部,可以访问 document 以及该元素本身的成员,这个函数是像这样使用 with 来扩展作用域的:

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

所以,在事件处理程序中,要访问自己的属性就变得很容易啦 O(∩_∩)O~:

<!-- 输出 “点我” -->
<input type="button" value="点我" onclick="alert(value)"/>

如果当前元素是一个表单输入元素,则作用域中还会包含访问表单元素(父元素)的入口,所以这个函数应该是这样的:

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

这样事件处理程序就无需引用表单元素,就可以直接访问到表单中的其他字段啦O(∩_∩)O~:

<form method="post">
  <input type="text" name="username" value="">
  <input type="button" value="Echo Usernmame" onclick="console.log(username.value);">
</form>

在 HTML 中直接指定事件处理程序会有这些缺点:

  • 时差问题——假设函数是定义在页面最底部,如果用户在页面还未解析到这个函数时,就点击了按钮,就会引发错误。所以很多 HTML 事件处理程序都会被封装在 try-catch 块中:
<input type="button" value="点我" onclick="try{alert(value);} catch(ex){}"/>

  • 扩展事件处理程序的作用域链,在不同的浏览器中结果可能会不同。
  • HTML 与 JavaScript 代码紧密耦合。要修改事件处理程序,就需要修改两个地方,所以很多开发人员转而使用 JavaScript 来指定事件处理程序。

2 DOM0 级事件处理程序

它是通过将一个函数赋值给事件处理程序的属性,来指定事件处理程序的。要使用这种方法,必须先取得一个要操作的对象的引用。

每个元素(包括 window 和 document) 都有自己的事件处理程序属性,它们通常是小写,比如 onclick。将属性的值设置为函数,就指定了事件处理程序。

DOM0 级事件处理程序是元素的方法,它是在元素的作用域内运行的,因此程序中的 this 引用的是当前元素:

<button id="myBtn">点我</button>
<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  btn.onclick = function () {
    console.log(this.id);//myBtn
  }
</script>

可以通过 this 访问元素的任何属性和方法。DOM0 级事件处理程序会在事件流的冒泡阶段被处理。

也可以像这样删除这样指定的事件处理程序:

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

注意: 如果使用的是 HTML 指定的事件处理程序,那么 onclick 属性的值就是一个包含着在同名 HTML 特性中指定的代码函数。将相应的属性设置为 null,也可以删除以这种方式指定的事件处理程序。

3 DOM2 级事件处理程序

  • addEventListener():指定事件处理程序。
  • removeEventListener():删除事件处理程序。

所有的 DOM 节点都包含这两个方法。它们都接受 3 个参数:要处理的事件名、事件处理程序函数、布尔值。最后一个参数如果是 true,表示在捕获阶段调用事件处理程序;如果是 false,表示在冒泡阶段调用事件处理程序。

DOM2 级事件处理程序可以很方便地添加多个事件处理程序:

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
  console.log(this.id);
}, false);
btn.addEventListener("click", function () {
  console.log("Hello world!");
}, false);

这些事件处理程序会按照添加它们的顺序依序触发。

通过 addEventListener() 添加的事件处理程序只能使用 removeEventListener() 移除!移除时传入的参数必须与添加时的参数相同。这也就意味着通过 addEventListener() 添加的匿名函数将无法被移除:

var handler = function () {
  console.log("Hi deniro");
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);//移除成功

大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,这样可以最大限度地兼容浏览器。所以如果不是特别需要,请不要在事件捕获阶段注册事件处理程序。

注意: IE9、Firefox、Safari、Chrome 和 Opera 支持 DOM2 级事件处理程序。

4 IE 事件处理程序

IE 实现了与 DOM 类似的方法:attachEvent()detachEvent()。它们接受两个参数:事件处理程序名称和事件处理程序函数。因为 IE8 及早期版本只支持事件冒泡,所以使用 attachEvent() 添加的事件处理程序会被添加到冒泡阶段。

这样为按钮添加一个事件处理程序:

var btn = document.getElementById("myBtn");
  btn.attachEvent("onclick", function () {
});

IE 的 attachEvent() 与 DOM0 级方法的区别是事件处理程序的作用域不同。 DOM0 级方法中,事件处理程序会在其所属元素的作用域内运行;而使用 attachEvent() ,事件处理程序会在全局作用域中运行,所以 this 等于 window:

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function () {
  console.log("Clicked");
  console.log(this === window);//true;this 为全局作用域
});

也可以为一个元素添加多个事件处理程序:

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function () {
  console.log("Clicked");
  console.log(this === window);//true;this 为全局作用域
});
//IE10 中多个事件是按照事件定义的顺序执行
btn.attachEvent("onclick", function () {
  console.log("Hello world!");
});

IE8 及之前的版本,是以添加它们的相反顺序进行,IE9 修复了这个问题。

可以通过 detachEvent() 来移除添加的事件处理程序,但必须提供相同的参数。所以它也不能移除之前通过匿名函数添加的事件处理程序。只要能够将对相同函数的引用作为参数,就可以移除添加的事件处理程序咯:

<button id="myBtn">点我</button>
<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  var handler = function () {
    console.log("Clicked");
  }
  btn.attachEvent("onclick", handler);
  btn.detachEvent("onclick", handler);
</script>

注意: IE 和 Opera 支持 IE 事件处理程序。

5 跨浏览器的事件处理程序

只要恰当地运用能力检测,就能写出跨浏览器的事件处理程序。

var EventUtil = {
  /**
   * 添加事件
   * @param element 要操作的元素
   * @param type 事件名称
   * @param handler 事件处理函数
   */
  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;
    }
  },
  /**
   * 移除事件
   * @param element 要操作的元素
   * @param type 事件名称
   * @param 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;
    }
  }
}

这样使用:

<button id="myBtn">点我</button>
<script type="text/javascript" src="EventUtil.js"/>
<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  var handler = function () {
    console.log("Clicked");
  }
  EventUtil.addHandler(btn, "click", handler);
  EventUtil.removeHandler(btn, "click", handler);
</script>

还有一点,DOM0 级对每一个事件只支持一个事件处理程序,好在现在只支持 DOM0 级事件处理程序的浏览器几乎已经没有咯,所以不用担心啦 O(∩_∩)O~

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:


  • 本文相关:
  • 浅谈javascript事件处理程序的几种方式
  • javascript事件处理程序(事件侦听器)
  • javascript事件处理器中的event参数使用介绍
  • javascript表单事件处理方法详解
  • 实例讲解javascript注册事件处理函数
  • javascript打造跨浏览器事件处理机制[blue-dream出品]
  • 详解js的事件处理函数和动态创建html标记方法
  • 详细解读javascript的跨浏览器事件处理
  • 探究javascript中的五种事件处理程序方式
  • javascript浏览器兼容教程之事件处理
  • 写给小白的javascript引擎指南
  • 从url中提取参数与将对象转换为url查询参数的实现代码
  • javascript实现动态改变层大小的方法
  • javascript实现翻页功能(附效果图)
  • 总结javascript中布尔操作符||与&&的使用技巧
  • web前端开发工具——bower依赖包管理工具
  • js实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
  • javascript实现对下拉列表值进行排序的方法
  • react-redux中connect()方法详细解析
  • js获取url中指定参数值的示例代码
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved