文档章节

JS事件机制

HelenYu
 HelenYu
发布于 2016/04/20 19:05
字数 783
阅读 33
收藏 0

     Js与Html之间的交互是通过事件来实现的,以观察者模式来实现事件响应机制。但在html及Js之间的事件处理程序有一定的差别,而且容易混淆。DOM的事件流分为两个阶段:1、捕获阶段;2、冒泡阶段。

     1、 Html指定事件处理的方式为:通过为某个元素支持的事件属性("on+"事件名)赋值为需要执行的js代码程序,即实现了该元素的事件响应。如:

<html>
   <head>
   </head>
   <body>
       <a id="a1" onclick="doOnClick(this)" href="#">Hello</a> 
       <script>
           function doOnClick(o){
              var e=window.event;  //e为点击事件对象
              var target=e.target;  //target为事件目标,当点击a1时,target就为a1
              var flag=(target===o);  //flag为true
              alert(o.id);               //o为html中this指代的a1,输出为:a1
              alert(this);            //this为window对象
              alert(flag);            //为true
           }
       </script>
   </body>
</html>

           缺点是:html代码与Js代码紧密耦合。

2、JS指定事件处理的方式:每个元素都有自己的事件处理程序属性,在js中通过为元素的事件属性(小写的,如:onclick)指定函数。如:

<html>
   <head>
  </head>
  <body>
       <a id="a1" href="#" >Hello</a> 
       <script>
           function doOnClick(){
              var e=window.event;  //e为点击事件对象
              var target=e.target;  //target为事件目标,当点击a1时,target就为a1
              var flag=(target===this);  //flag为true
              var flag_e=(e===event) ;    //true,event为调用该函数的触发事件对象
              alert(this.id);            //this为a1对象,输出为:a1
              alert(flag);            //为true
              alert(flag_e);           //true
           }
           var a1=document.getElementById("a1");
           a1.onclick=doOnClick;
       </script>
   </body>
</html>

   优点:一是简单,二是具有跨浏览器的优势。通过两种方式的对比,更好的理解和区分this对象。

   js指定事件处理方式根据DOM级别及浏览器不同,所使用的API也有区别。

  2.1、 DOM0级事件处理程序:上面的第二个代码例子就是这种方式。解除事件绑定的方式就是为该事件属性设值为null。

 2.2、DOM2级事件处理程序:通过元素的addEventListener("事件名",“处理函数”,“事件处理阶段标识”)方法来响应事件。其中事件处理阶段标识为true表示该事件在捕获阶段调用处理函数,false则为冒泡阶段处理。解除事件绑定使用:removeEventListener("事件名",“处理函数”,“事件处理阶段标识")。注意的是,处理函数必须是addEventListener中加入的同一函数,所以绑定的匿名函数无法解除。

 2.3、IE事件处理程序:通过元素的attachEvent("on+事件名",“处理函数”)方法来响应事件。解除事件绑定使用:detachEvent("on+事件名",“处理函数")。注意的是:1、处理函数必须是attachEvent中加入的同一函数,所以绑定的匿名函数无法解除;2、这种方式绑定的函数在全局作用域中运行,所以该绑定的函数中的this为window对象;3、这种事件处理方式都是在冒泡阶段执行的。

© 著作权归作者所有

HelenYu
粉丝 4
博文 7
码字总数 3419
作品 0
石景山
程序员
私信 提问
浅谈js的事件循环(Event Loop)

事件循环是js这门语言的一大特点。 了解事件循环机制,有助于日常开发中遇到的一些异步问题。 而且还是前端面试一经常考点。 故本人结合一些文章和个人的一些开发经验,浅淡一下 一,js是一门...

田小菜
05/08
0
0
关于Javascript技术体系

Javascript技术体系主要包含了五个方面的内容: Javascript核心语言定义:每一种编程语言都有自已的核心语法,包括数据类型,变量,常量,运算符,语句等。 原生对象和内置对象:为方便程序员...

倪九林
2014/09/15
288
0
javascript中的线程之我见

今天与一个同事争论javascripe中间的线程机制,他争论说javascript是有线程的,理由即使javascript中间的事件回调就是线程的实现,个人认为在javascript中是没有线程机制的 理由如下: 引自《...

mj4738
2013/02/11
323
0
好程序员web前端分享JS引擎的执行机制

  好程序员web前端分享JS引擎的执行机制,请先着重牢记两点!JS是单线程语言。 JS的EventLoop是JS的执行机制。深入了解JS的执行,就等于深入了解JS里的eventloop。 1、灵魂三问:JS为什么是...

好程序员IT
06/12
9
0
JS异步编程之callback

为什么 JS 是单线程? 众所周知,Javascript 语言的执行环境是"单线程"(single thread)。 所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执...

南波
02/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 年迈渔夫遭黑帮袭抢

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享Elvis Presley的单曲《White Christmas》: 《White Christmas》- Elvis Presley 手机党少年们想听歌,请使劲...

小小编辑
今天
1K
20
CentOS7.6中安装使用fcitx框架

内容目录 一、为什么要使用fcitx?二、安装fcitx框架三、安装搜狗输入法 一、为什么要使用fcitx? Gnome3桌面自带的输入法框架为ibus,而在使用ibus时会时不时出现卡顿无法输入的现象。 搜狗和...

技术训练营
昨天
5
0
《Designing.Data-Intensive.Applications》笔记 四

第九章 一致性与共识 分布式系统最重要的的抽象之一是共识(consensus):让所有的节点对某件事达成一致。 最终一致性(eventual consistency)只提供较弱的保证,需要探索更高的一致性保证(stro...

丰田破产标志
昨天
9
0
docker 使用mysql

1, 进入容器 比如 myslq1 里面进行操作 docker exec -it mysql1 /bin/bash 2. 退出 容器 交互: exit 3. mysql 启动在容器里面,并且 可以本地连接mysql docker run --name mysql1 --env MY...

之渊
昨天
17
0
python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部