• JS_DOM事件温习


    先来复习一下DOM知识:

    事件冒泡:即事件最开始由最具体的元素接收,然后逐级向上传播,至最不具体的那个节点(文档)

    事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。

    事件处理程序:

    HTML事件处理程序(缺点JS和HTML紧耦合,不易于维护,降低性能)

    DOM0级别事件处理程序(对这个我比较疑惑,有些资料有这个概念,有写资料没有这个概念,根据JS高级程序设计给出的它只能作为一个历史参考点)

    DOM1级事件处理程序

    DOM2级事件处理程序(能给一个元素重复定义多个相同事件的不同处理方法)[DOM2之前要自行添加代码实现]

    DOM3级事件处理程序

    还有IE事件处理程序(要对IE存在正确的仇视心理~)

    贴上一个跨浏览器的事件处理代码

     1 var eventUtils = {
     2 
     3     getEvent:function(event){
     4         return event?event:window.event;
     5     },
     6 
     7     getType:function(event){
     8         return event.type;
     9     },
    10 
    11     getTarget:function(event){
    12         return event.target || event.srcElement;
    13     },
    14 
    15     stopPropagation:function(event){
    16         if(event.stopPropagation){
    17             event.stopPropagation();
    18         }
    19         else{
    20             event.cancelBubble = true;
    21         }
    22     },
    23 
    24     preventDefault:function(event){
    25         if(event.preventDefault){
    26             event.preventDefault();
    27         }
    28         else{
    29             event.returnValue = false;
    30         }
    31     },
    32 
    33     addHandler:function(obj,method,fn){
    34         if(obj.addEventListener){
    35             obj.addEventListener(method,fn);
    36         }
    37         else if(obj.attachEvent){
    38             obj.attachEvent("on"+method,fn);
    39         }
    40         else{
    41             obj["on"+method] = fn;
    42         }
    43     },
    44 
    45     removeHandler:function(obj,method,fn){
    46         if(obj.removeEventListener){
    47             obj.removeEventListener(method,fn);
    48         }
    49         else if(obj.detachEvent){
    50             obj.detachEvent("on"+method,fn);
    51         }
    52         else{
    53             obj["on"+method] = null;
    54         }
    55     }
    56 }

    以上内容,如有错误请指出,不甚感激。

  • 相关阅读:
    OpenCV之图像归一化(normalize)
    虚拟机网络模式说明
    大端模式和小端模式
    ASCII、Unicode、UTF-8、UTF-8(without BOM)、UTF-16、UTF-32傻傻分不清
    MFC窗口通过OpenCV显示图片
    基于FFmpeg的Dxva2硬解码及Direct3D显示(五)
    PyQt5播放实时视频流或本地视频文件
    PyQt5信号与槽关联的两种方式
    PyCharm离线安装PyQt5_tools(QtDesigner)
    DC: 8
  • 原文地址:https://www.cnblogs.com/adelina-blog/p/5884311.html
Copyright © 2020-2023  润新知