zoukankan      html  css  js  c++  java
  • JavaScript 学习笔记 之事件

    事件

    事件是DOM(文档对象模型)的一部分。事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别。

    一、事件流

    1、冒泡型事件

    IE上的解决方案就是冒泡型事件,它的基本思想是从最特定的目标到最不特定的事件目标(document对象)的顺序触发。

    过程:按照DOM的层次结构像水泡一样不断上升至顶端。(从里面的div触发事件再到body,到html最后直到document最顶端)。

    2、捕获型事件

    可以说跟冒泡是正好相反的,事件从最不精确的对象开始触发,然后直到最精确。

    3DOM事件流

    DOM同时支持以上两种事件模型,其中捕获型事件先发生,从document对象开始,最后在document对象结束。

    二、事件监听函数

    1IE

    每个函数和window对象都有两个方法:

    attachEvent()方法:附加事件处理函数

    [Object].attachEvent(事件名处理函数fnHandler)

    该方法有两个参数。

    var fnClick = function() {

        alert("你点击了IDdiv1DIV");

    }

    var oDiv = document.getElementById("div1");

    oDiv.attachEvent("onclick", fnClick);

    可以附加多个处理函数。

    detachEvent()方法:分离移除事件处理函数

    2DOM

    addEventListener()方法:分配附加事件处理函数            

    [Object]. addEventListener (“事件名处理函数fnHandlerBoolean)

    该方法有三个参数(“事件名”,“分配的函数”,处理函数是冒泡阶段还是捕获阶段

    如果事件处理函数是用于捕获阶段,则第三个参数是true,用于冒泡阶段则为false

    var fnClick = function() {

        alert("Clicked!");

    }

    var oDiv = document.getElementById("div");

    oDiv.addEventListener("click", fnClick, false);

     

    oDiv.removeEventListener("click", fnClick, false);

    可以附加多个处理函数。

     

    removeEventListener()方法:移除事件处理函数            

     

    三、事件对象

    包含三个方面的信息:

    1、引起事件的对象IE中就是window.eventDOM中是处理函数的为唯一参数

    2、事件发生时的鼠标信息;

    3、事件发生时的键盘信息。

    IE事件对象

    IE中,事件对象是window对象的一个属性event。也就是说,事件处理函数必须这样访问事件对象:

    oDiv.onclick = function() { var oEvent = window.event; }oDiv.onclick = function(){ var oEvent = window.event;}

     

    尽管是window对象的属性,event对象还是只能在事件发生时访问。所有的事件处理函数执行完毕后销毁。

     

    DOM标准的事件对象

    event对象必须作为唯一的参数传给事件处理函数。所以,在DOM兼容的浏览器(MozillaSafariOpera)中访问事件对象,要这么做:

    oDiv.onclick = function() {

    var oEvent = arguments[0];

    }

    //也可以这样

    oDiv.onclick = function(oEvent) {

    //.....

    }

  • 相关阅读:
    weblogic 的应用 常见问题处理 db2 链接不上(转载)
    WebLogic简单的备份和恢复
    linux 切换用户之后变成-bash-x.x$的解决方法
    weblogic迁移随手记
    生产环境下Centos 6.5优化配置 (装载)
    查看db2表空间使用率
    Linux 之 rsyslog 系统日志转发(转载)
    windows下定时利用bat脚本实现ftp上传和下载
    rsyslog同步history日志(转载)
    linux比较指令comm、diff、grep -Ff
  • 原文地址:https://www.cnblogs.com/johnwonder/p/1671545.html
Copyright © 2011-2022 走看看