文档章节

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
为什么要有事件循环机制(Event Loop)

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

a独家记忆
06/29
0
0
javascript中的定时器(How JavaScript Timers Work)

javascript定时器工作原理是一个重要的基础知识点。因为定时器在单线程中工作,它们表现出的行为很直观。我们该如何创建和维护定时器呢?要从如下三个函数(都是定义在全局作用域,在浏览器中...

隐性精神病人
2014/07/22
0
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
07/04
0
0
PHP学习路线图 最全PHP自学指南

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

W3Cschool小编
04/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

技术工坊|如何降低区块链应用的使用门槛(上海)

当区块链技术从专业研究走向市场应用,开发者需要考虑用户的使用场景和使用门槛,例如通过ETH支付gas手续费,或者注册一个16进制的用户名,普通用户都难以接受。 10月20日,HiBlock区块链社区...

HiBlock
19分钟前
1
0
Daemon线程--《Java并发编程的艺术》学习笔记

daemon线程即守护线程 当一个JVM中不存在非Daemon线程时,JVM将会退出 也就是说当非Daemon线程都执行完毕时,java程序也就结束了。 可以通过调用Thread.setDaemon(true)将线程设置为Daemon线...

karma123
25分钟前
0
0
scala类型参数的上界和下界

class Pair[T <: Comparable[T]](val first:T,val second:T) //类型T必须要是Comparable接口的子类(即T是Comparable的下界){ def bigger = if(first.compareTo(second) > 0) first e......

whoisliang
35分钟前
1
0
Vue中路由管理器Vue Router使用介绍(一)

一、在模块编程中安装VueRouter 1.Npm安装vue-router npm install vue-router 2.在main.js中引用并使用VueRouter import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(Vu......

tianma3798
37分钟前
1
0
TypeScript基础入门之声明合并(一)

转发 TypeScript基础入门之声明合并(一) 声明合并 介绍 TypeScript中的一些独特概念描述了类型级别的JavaScript对象的形状。 TypeScript特别独特的一个例子是"声明合并"的概念。 在使用现有J...

durban
51分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部