JavaScript 事件知识点
博客专区 > clorris 的博客 > 博客详情
JavaScript 事件知识点
clorris 发表于1年前
JavaScript 事件知识点
  • 发表于 1年前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

事件流

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

  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

标签: JavaScript 事件
共有 人打赏支持
粉丝 2
博文 3
码字总数 2323
×
clorris
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: