文档章节

JavaScript 事件知识点

clorris
 clorris
发布于 2016/12/09 16:23
字数 1295
阅读 11
收藏 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

异步化,高并发大杀器

今天来聊聊如何让项目异步化的一些事。 在进入正文之前,顺便给大家推荐一个Java架构方面的交流学习群:698581634,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分...

Java大蜗牛
10分钟前
0
0
织梦dedecms安全设置

网站本身做好防范: 1、修改默认后台名。 打开网站根目录,找到[dede],这个文件夹就是后台的路径,可以随意修改,比如修改为[adminbuy],此时后台登陆的路径为:http://www.*****.com/admi...

雨季2014
11分钟前
0
0
完美Python入门基础知识点总结,看完你的Python就完全入门了!

Python标识符 在 Python 里,标识符有字母、数字、下划线组成。 在 Python 中,所有标识符可以包括英文、数字以及下划线(_),但不能以数字开头。 Python 中的标识符是区分大小写的。 以下划线...

糖宝lsh
17分钟前
0
0
Java关于前后台传输中文乱码以及Excel下载乱码解决

针对乱码,一般情况是前后台以及中间件编码格式不同导致.故需要保证编码格式相同即可. 1.前台页面格式指定,这里用的是jsp,故需要将pageEncoding指定为"UTF-8" 2.指定服务器编码格式,比如用的t...

勤奋的蚂蚁
19分钟前
0
0
Flutter组件 - Flexible

Flexible是一个控制Row、Column、Flex等子组件如何布局的组件。 Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力(例如,Row在水平方向,Column在垂直方向),但是...

一箭落旄头
22分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部