文档章节

JavaScript 事件知识点

clorris
 clorris
发布于 2016/12/09 16:23
字数 1295
阅读 12
收藏 0

事件流

事件流描述的是从页面中接收事件的顺序。

  1. 事件捕获(Netspace Communicator提出的):思想是不太具体的节点应该更早接收的事件,而最具体的节点应该最后接收到事件。
  2. 事件冒泡(IE事件流):事件开始由具体的元素接收,然后逐级向上传播到较为不具体的节点。
  3. DOM事件流:规定事件流包括三个阶段:事件捕获阶段(提供截获事件的机会),处于目标阶段(目标接收到事件),事件冒泡阶段(对事件作出响应)。

事件处理程序

响应某个事件的函数。

  1. HTML事件处理程序:

     有三个缺点:

  • 存在时差问题。可能在HTML元素一出现时马上触发相应的事件,但当时的事件处理程序可能还不具备执行条件。

  • 在不同的浏览器中会导致不同的结果。

  • HTML和JavaScript代码紧密耦合

  1. <input type="button" value="Click Me" onclick="alert('Clicked')" /> 
    
    <!--输出click-->
    <input type="button" value="Click Me" onclick="alert(event.type)" /> 
    <!--事件处理程序先创建一个封装着元素属性值的函数,函数包含一个event变量,即事件对象,可以直接访问这个对象。-->
    
    <!--输出Click Me-->
    <input type="button" value="Click Me" onclick="alert(this.value)" /> 
    <!--this值等于事件的目标元素-->

        所以许多开发人员摒弃HTML事件处理程序,转而使用JavaScript指定事件处理程序。 

  2. DOM事件处理程序:
    //DOM0级事件处理程序
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        alert("Clicked");
    }
    
    //DOM2级事件处理程序:定义了两个方法addEventListener()和removeEventListener(),用于指定和删除事件处理程序。
    //参数一:要处理的事件名
    //参数二:事件处理的函数
    //参数三:事件触发的阶段:true表示在捕获阶段调用,false表示在冒泡阶段调用事件处理程序。
    var btn = document.getElementById("myBtn");
    btn.addEventListener("click",function(){
        alert("Clicked");
    },false);
    
    btn.removeEventListener("click",function(){
        //没有用!但参数二必须和addEventListener的参数二保持一致。所以匿名函数不能移除。
    },false);

     

  3. IE事件处理程序
    //两个方法:attachEvent()和detachEvent();只有两个参数,因为IE8以下的版本只支持事件冒泡
    
    var btn = getElementById("myBtn");
    var handler =function(){
        alert("Clicked");
    };
    btn.attachEvent("onclick",handler);
    btn.detachEvent("onclick",handler);
    
    //在IE中使用attachEvent()与使用DOM0级方法主要区别于事件处理程序的作用域。
    //DOM0级事件处理程序在其所属元素的作用域内运行。
    //使用attachEvent()方法,事件处理程序会在全局作用域中运行

     

  4. 跨浏览器事件处理程序
    //不少开发人员都是有能够隔离浏览器差异的JavaScript库来达到目的
    //自己编写跨浏览器方法
    var EventUtil = {
        addHandler:function(element,type,handler){
            if(element.addEventListener){    //DOM2
                element.addEventListener(type,handler,false);
            }else if(){   //IE
                element.attachEvent("on"+type,handler);
            }else{        //DOM0
                element["on"+type] = handler;
            }
        },
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                 element.removeEventListener(type,handler,false);
            }else if(){
                 element.removeEventListener(type,handler);
            }else{
                 element["on"+type] = null;
            }
        }
    }

     

事件对象   


IE 属性

除了上面的鼠标/事件属性,IE 浏览器还支持下面的属性:

属性 描述
cancelBubble 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。
fromElement 对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。
keyCode 对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue 如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。
srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement 对于 mouseover 和 mouseout 事件,该属性引用移入鼠标的元素。
x,y 事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

属性 描述
bubbles 返回布尔值,指示事件是否是起泡事件类型。
cancelable 返回布尔值,指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
target 返回触发此事件的元素(事件的目标节点)。
timeStamp 返回事件生成的日期和时间。
type 返回当前 Event 对象表示的事件的名称。

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法:

方法 描述
initEvent() 初始化新创建的 Event 对象的属性。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation() 不再派发事件。

HTML DOM 事件

参考资料:

JavaScript高级程序设计(第3版)

http://www.w3school.com.cn/jsref/dom_obj_event.asp

© 著作权归作者所有

共有 人打赏支持
clorris
粉丝 1
博文 3
码字总数 2323
作品 0
金华
程序员
私信 提问
四月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳
05/02
0
0
彻底搞懂JavaScript执行机制

首先我们大家都了解的是,JavaScript 是一门单线程语言,所以我们就可以得出: JavaScript 是按照语句顺序执行的 首先看: 这个显然大家都知道结果,依次输出1,2 然而换一种: 这个时候再看...

架构师springboot
11/11
0
0
为什么要有事件循环机制(Event Loop)

事件循环机制(Event Loop)是全面了解javascript代码执行顺序绕不开的一个重要知识点。虽然许多人知道这个知识点非常重要,但是其实很少有人能够真正理解它。特别是在ES6正式支持Promise之后...

a独家记忆
06/29
0
0
前端进阶(第一期)-调用堆栈笔记

1-1 理解 Javascript 执行上下文和执行栈 原文地址 知识点有: JavaScript程序的内部执行机制; 理解执行上下文和执行栈; 理解以上知识点有助于理解JavaScript的提升机制、作用域和闭包 执行...

xszi
12/04
0
0
PHP学习路线图 最全PHP自学指南

对于广大零基础的PHP自学者,往往不知道如何系统的学习PHP,导致平白浪费了很多时间。本文将为大家带来最详细的php学习路线图,同时还会附上相应的权威教程,让广大PHP自学者少走许多弯路。 ...

W3Cschool小编
04/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MyBaties分页插件PageHelper的简单使用

抛出问题: 如果想要将现有的select语句改为支持分页功能的查询语句该怎么做呢? 最简单的一种做法就是将所有的select语句都加上limit来实现分页,这种做法有什么问题呢? 有没有一种简便方法...

嘴角轻扬30
21分钟前
1
0
创业公司如何快速构建高效的监控系统?

12 月 7 日,在 2018 ArchSummit 全球架构师峰会·运维与监控专场,七牛云资深运维开发工程师贺强带来了主题为《如何快速构建高效的监控系统》的内容分享。 本文是对演讲内容的实录整理。 大...

七牛云
21分钟前
0
0
Docker与自动化测试及其测试实践

Docker 与自动化测试 对于重复枯燥的手动测试任务,可以考虑将其进行自动化改造。自动化的成本在于自动化程序的编写和维护,而收益在于节省了手动执行用例的时间。简而言之,如果收益大于成本...

微笑向暖wx
22分钟前
1
0
Spring Cloud 分布式链路跟踪 Sleuth + Zipkin + Elasticsearch

随着业务越来越复杂,系统也随之进行各种拆分,特别是随着微服务架构的兴起,看似一个简单的应用,后台可能很多服务在支撑;一个请求可能需要多个服务的调用;当请求迟缓或不可用时,无法得知...

编程SHA
24分钟前
1
0
Swift-清除缓存

func removeCache (){ // 取出cache文件夹路径.如果清除其他位子的可以将cachesDirectory换成对应的文件夹 let cachePath = NSSearchPathForDirectoriesInDomains(FileMan...

west_zll
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部