澳门正规赌博十大网站-澳门游戏网站
做最好的网站

JS中的事件类型和事件属性的基础知识,Javascri

  今天写代码,把click事件绑定到了document上面,当我点击鼠标右键的时候,没想到firefox出发了click事件,在ie8 chrome13 上面测试都没有触发click事件,只有firefox触发了,再次测试把click放到一个div元素上click点击鼠标右键没有触发,靠,下次注意了,不知道这是什么意思,

  周末无聊, 这几天又复习了下JS搞基程序设计3, 想着好记性不如浪笔头哇, 要么把这些东西写下来, 这样基础才能更加扎实么么哒, 知道的同学也可以直接过一下,当做复习,  小姨子再也不用担心我的学习啦;

Javascript事件总结

  测试代码如下:

  从哪里开始呢?????图片 1? ???????

一:事件流

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>document click测试</title>
</head>
<body>
<div>点击测试 firefox 6.0.2右键点击的时候出发click事件</div>
<script type="text/javascript">
var addEvent =function(ele,evt,call){
if(ele.addEventListener){
ele.addEventListener(evt,call);
}elseif(ele.attachEvent){
ele.attachEvent("on" evt,call)
}
}
addEvent(document,"click",function(){
alert("我触发了事件!");
});
</script>
</body>
</html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果,请按Ctrl F5刷新本页,更多网页代码:<a href='http://www.bkjia.com/' target='_blank'>http://www.bkjia.com/</a></div>

 

      事件流描述的是从页面中接收事件的顺序,IE和Netscape提出来差不多完全相反的事件流的概念,IE事件流是事件冒泡流,Netscape事件流是事件捕获流。

提示:可修改后代码再运行!

  事件的类型

事件冒泡

  本文来源:

    DOM3规定了下面这几事件类型:
    UI事件;onload,resize,scoll等等;
JS中的事件类型和事件属性的基础知识,Javascript事件总结。    焦点事件;
    鼠标事件;
    滚轮事件;
    文本事件;
    键盘事件;
    变动事件;(用的也少);
    变动名称事件,当元素的属性名发生改变的时候触发(没啥用, 要弄编辑器的时候才用得到);

     IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收,然后逐级向上(一直到文档);如下代码:

chrome13 上面测试都没有触发c...

      UI事件:
      "DOMActivate"JS中的事件类型和事件属性的基础知识,Javascript事件总结。  :  元素被用户操作(鼠标或者键盘激活)会触发的事件, chrome(38)有效, firefox(34)下无效, 代码如下,点击即可打开查看:

<div id = "div">                <a id="aTag">事件测试</a>        </div>

    

JS如下:

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>事件的类型</title>
            <meta charset="UTF-8" />
        </head>
        <body>
        <pre>
            test
        </pre>
        <script>
            document.body.addEventListener("DOMActivate",function(){
                alert("body")
            },false);
            document.getElementsByTagName("pre")[0].addEventListener("DOMActivate",function(){
                alert("pre")
            },false);
        </script>
        </body>
        </html>
document.getElementById("aTag").addEventListener('click',aTag);  document.getElementById("span").addEventListener('click',span);  document.getElementById("div").addEventListener('click',div);  function aTag(e) {      alert("点击的是a标签");  }  function span(e) {      alert("点击的是span标签");  }  function div(e) {      alert("点击的是div标签");  }

 

当单击 “事件测试”文字后,那么click事件会按照如下顺序传播;

 

   1)先打印出:点击的是a标签

    "onload" : 会在window, object 以及 img上面触发(PS:IE8和IE8之前的script标签不支持onload, 但是支持onreadystatechange, IE家族中所有元素都支持这个状态属性么么哒)
    "unload" : window.onuload , object.onunload ,图像不触发onunload;

   2) 再打印出:点击的是span标签

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>事件的类型</title>
    <meta charset="UTF-8" />
</head>
<body>
<pre>
            test
            //图像被删除不触发unload事件;
        </pre>
<script>
    var i = document.createElement("img");
    document.body.appendChild(i);
    i.onload = function() {alert("load")};
    i.onunload = function() {
        alert("onunload");
    };
    //记得要先添加事件哦, 因为img标签只要添加了url就会开始加载, script和link标签要等到添加到DOM中才开始加载!important;
    i.src="http://static.cnblogs.comlogo_small.gif";
    document.body.removeChild(i);
</script>
</body>
</html>

   3) 最后打印出:点击的是div标签

 

JS中的事件类型和事件属性的基础知识,Javascript事件总结。   4)  最后肯定是document文档。

 

所有现代浏览器都支持事件冒泡。

 

事件捕获:

  "error" : 当一个js代码执行发生错误的时候触发, 或者img, object, script等需要请求远程资源的标签没有请求到, 就会触发这个事件, 这个事件实际工作中用的不多。。 

事件捕获与事件冒泡事件流正好相反的顺序,事件捕获的事件流是最外层逐级向内传播,也就是先document,然后逐级div标签 , span标签 , a标签;

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>事件的类型</title>
            <meta charset="UTF-16" />
        </head>
        <script>
            window.onerror = function(){
                alert("JS执行发出错误!")
            };
            a(1)
        </script>
        <body>
        <pre>
            <img onerror="alert('error')" src="unknow.png" />
        </pre>
        </body>
        </html>

上面的JS代码改成如下:

 

document.getElementById("div").addEventListener('click',div,true);  document.getElementById("aTag").addEventListener('click',aTag,true);  document.getElementById("span").addEventListener('click',span,true);

 

第三个参数设置为true,即为捕获事件,默认为false;否则的话,事件流还是和上面的一样,因为不管是在IE还是标准浏览器下,事件冒泡浏览器都支持的。

  "abort" : 用户停止下载(用户问题)或者内容没有加载完毕(服务器问题), 就会触发;
  "resize" : 把窗口拉大拉小, 最大化和最小化也会触发这个事件(在移动端上的onoritatinochange反应很慢,就可以用resize代替),而且火狐的低版本是等到用户停止resize才会执行事件函数;
  "scroll" : 滚动,主要是window.onscroll这个事件。

DOM事件流

  resize事件的执行快的话70毫秒,慢的话100毫秒执行一次,DEMO, 你把界面resize一下,然后快一点点击cacl 这个按钮测试浏览器平均多久执行一次resize的事件,别怪我懒啊,锻炼你的反应力的时候到了,懂吗 \~_~///;

     DOM2级事件JS中的事件类型和事件属性的基础知识,Javascript事件总结。规定的事件流包括三个阶段,分别是:事件捕获阶段,处于目标阶段和事件冒泡阶段。示意图就不画了,具体的可以看看书。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>事件的类型</title>
    <meta charset="UTF-16" />
</head>
<body>
<pre>
            sdfs
        </pre>
<div>
    result:0
</div>
<button onclick="calc()"> calc </button>
<script>
    var startTime = null;
    var times = []
    window.onresize = function(){
        if(startTime === null) {
            startTime =  new Date().getTime();
        };
        times.push(new Date().getTime() - startTime);
        console.log(new Date().getTime() - startTime)
    };
    function calc(){
        var len = times.length;;
        var val = times.reduce(function(a,b){return a b})/len;
        document.getElementsByTagName("div")[0].innerHTML = val "毫秒";
    };
</script>
</body>
</html>

    DOM0级事件处理程序

 

如下代码是DOM0级事件处理程序:

  焦点事件 : 焦点事件可以获取用户在界面上的行踪;
    blur : 失去焦点的 时候触发, 不冒泡;
    focus : 这个是聚焦的时候发生, 不冒泡;
    DOMFocusIn : 这个时间和 focusin一样,只是DOM三选择了focusin
    DOMFocusOut : 这个时间和 focusout一样,只是DOM3选择了focusout
    focusin :冒泡的聚焦事件;
    focusout : 冒泡的失焦事件;

var btn = document.getElementById("btn");  btn.onclick = function(){       alert("Clicked");  };

    检测焦点事件的代码如下,只能说火狐不给力,:

使用DOM0级方法指定的事件处理程序被认为是元素的方法,处理程序是在元素的作用域进行的,程序中this是引用的是当前元素。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>事件的类型</title>
    <meta charset="UTF-8" />
</head>
<body>
<button id="btn"> calc </button>
    <pre>
        chrome 的结果
            focus
            focusin
            body focusin
            DOMFocusIn
            blur
            focusout
            body focusout
            DOMFocusOut
        firefox的结果:
            "focus"
            "blur"

        chorme所有的冒泡事件都支持。
        火狐34还是只支持focus 和blur, 而且界面一开始就自动对body进行了focus;
    </pre>
<script>
    var eventUtil = {
        add : function(el, type, handler) {
            if(el.addEventListener) {
                el.addEventListener(type, handler, false);
            }else if( el.attachEvent ) {
                el.attachEvent("on" type, handler);
            }else{
                el["on" type] = handler;
            }
        },
        off : function(el, type, handler) {
            if( el.removeEventListener ) {
                el.removeEventListener(type, handler, false)
            }else if( el.detachEvent ) {
                el.detachEvent(type, handler);
            }else{
                el["on" type] = null;
            }
        }
    };
    var eBtn = document.getElementById("btn");
    eventUtil.add(eBtn,"focus",function() {
        console.log("focus")
    })
    eventUtil.add(eBtn,"blur",function() {
        console.log("blur")
    })
    eventUtil.add(eBtn,"DOMFocusIn",function() {
        console.log("DOMFocusIn")
    })
    eventUtil.add(eBtn,"DOMFocusOut",function() {
        console.log("DOMFocusOut")
    })
    eventUtil.add(eBtn,"focusout",function() {
        console.log("focusout")
    })
    eventUtil.add(eBtn,"focusin",function() {
        console.log("focusin")
    });
    eventUtil.add(document.body,"focusin",function() {
        console.log("body focusin")
    });
    eventUtil.add(document.body,"focusout",function() {
        console.log("body focusout")
    });
    /*
     document.body.onfocus = function(){
     console.log("body focusin")
     }
     */
</script>
</body>
</html>
<div id="btn">btn</div>  var btn = document.getElementById("btn");  btn.onclick = function(){      alert(this.id); // 弹出btn  }

 

单击元素btn后,通过this.id取得元素的属性id,还可以通过this访问元素的任何属性和方法,以这种方式添加的事情处理程序在事件流的冒泡阶段处理。

 

也可以删除通过DOM0级方法指定的事件处理程序,只要将事件处理程序的属性值设置为null即可。

  

btn.onclick = null; // 删除事件处理程序;

  鼠标和滚轮你事件:
    DOM3规定了9个鼠标事件(.........)你数一数,是不是刚好九个;
    click:一般是左键触发这个事件,右键是触发右键菜单,如果当前的元素获得焦点,那么我们按回车(enter)也会触发click事件, 这个DEMO不是让你点击,是让你在按钮聚焦的情况下按enter键

如下JS代码改成如下:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>事件的类型</title>
        <meta charset="UTF-8" />
    </head>
    <body>
    <button autofocus="true" id="btn"> calc </button>
    <pre>

    </pre>
    <script>
    var eventUtil = {
        add : function(el, type, handler) {
            if(el.addEventListener) {
                el.addEventListener(type, handler, false);
            }else if( el.attachEvent ) {
                el.attachEvent("on" type, handler);
            }else{
                el["on" type] = handler;
            }
        },
        off : function(el, type, handler) {
            if( el.removeEventListener ) {
                el.removeEventListener(type, handler, false)
            }else if( el.detachEvent ) {
                el.detachEvent(type, handler);
            }else{
                el["on" type] = null;
            }
        }
    };
    var eBtn = document.getElementById("btn");
    eventUtil.add(eBtn,"click",function() {
        alert("click")
    })
    </script>
    </body>
    </html>
var btn = document.getElementById("btn");  btn.onclick = function(){      alert(this.id);  }  btn.onclick = null;

 

再单击btn后,没有任何反应;

  dblclick:鼠标双击的时候触发,有时候有用, 如果dblclick触发了也会触发click的事件;

DOM2级事件处理程序

  

DOM2级事件定义了2个方法,用于处理指定和删除事件处理程序的操作;

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>事件的类型</title>
        <meta charset="UTF-16" />
    </head>
    <body>
    <div id="btn"> calc </div>
    <pre>

    </pre>
    <script>
    var eventUtil = {
        add : function(el, type, handler) {
            if(el.addEventListener) {
                el.addEventListener(type, handler, false);
            }else if( el.attachEvent ) {
                el.attachEvent("on" type, handler);
            }else{
                el["on" type] = handler;
            }
        },
        off : function(el, type, handler) {
            if( el.removeEventListener ) {
                el.removeEventListener(type, handler, false)
            }else if( el.detachEvent ) {
                el.detachEvent(type, handler);
            }else{
                el["on" type] = null;
            }
        }
    };
    var eBtn = document.getElementById("btn");
    eventUtil.add(eBtn,"click",function() {
        console.log("click")
    })
    eventUtil.add(eBtn,"dblclick",function() {
        console.log("dblclick")
    });
    /*
        控制台输出 :
        "click"
        "dblclick"
        "click"
        "dblclick"
        结论就是两次快速的点击会触发一次dblclick(dbl的意思就是doubleclick的缩写)
    */
    </script>
    </body>
    </html>

addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法,他们包含三个参数,第一个参数为事件类型;第二个参数为事件函数,第三个参数为布尔值,如果是true的话,说明是事件流是捕获事件,如果是false的话,那么事件流是冒泡事件;

 

比如如上的btn代码,我们改成如下:

  

var btn = document.getElementById("btn");  btn.addEventListener('click',function(e){      alert(this.id);  },false);

  事件名字只要包含mouse, 都只能通过鼠标的触发比如, 无法通过键盘触发的事件:
    mousedown,
    mousemove,
    mouseout,
    mouseover,
    mouseup
    mouseenter, (要注意这个事件, chrome的高版本才支持的, 这个事件是ie先弄出来的,jQ有做兼容处理所以在chrome下可以使用这个事件)  
    mouseleaver (要注意这个事件, chrome的高版本才支持的, 这个事件是ie先弄出来的,jQ有做兼容处理所以在chrome下可以使用这个事件);

上面的点击事件是在冒泡阶段被触发,与DOM0级方法一样,这里添加的事件处理程序也是在其依副的元素作用域中运行,使用DOM2级添加事件处理程序的好处是可以添加多个事件处理程序,如下代码:

 

var btn = document.getElementById("btn");  btn.addEventListener('click',function(e){      alert(this.id);  },false);  btn.addEventListener('click',function(e){      alert("我是来测试的");  },false);

 

上面的代码被弹出2次对话框,而在DOM0级是不可以的;它永远是执行最后一次的。

  因为常用的点击都是鼠标左键, 所以要触发dblclick会触发大部分的mouse事件;
  比如你要触发dblclick, 也会依次触发
   1: mousedown
   2: mouseup
   3: click
   4: mousedown
   5: mouseup
   6: click
   7: dblclick;

addEventListener添加的事件只能使用removeEventListener来删除相对应的事件,那么如上的JS不能按照上面的方式来编写哦!需要给定义一个函数;如下:

  要检测鼠标事件的兼容通过:
    document.implementation.hasFeature("MouseEvents","2.0") //true (注意注意,DOM2的事件检测的名字是复数,要加一个s,DOM3的不用的)
    document.implementation.hasFeature("MouseEvent","3.0") //true
    document.implementation.hasFeature("MouseEvent","4.0") //true
    document.implementation.hasFeature("MouseEvent","5.0") //true
    chrome和firefox这两个奇葩了(IE? IE是什么能吃吗?), 无论怎么传都是true, 我勒个去;

btn.addEventListener('click',handler,false);  function handler(e){     alert(this.id);  }

  事件对象的属性:
  客户坐标的值:
    clientX
    clientY
  页面坐标的值:
    pageX
    pageY;
  IE8以及更早版本没有pageX这个值,我们可以通过客户指标的值(clientX,clientY)和界面的滚动条算出来;
    pageX = clientX document.documentElement.scrollLeft || document.body.scrollLeft (IE8以及之前的2px没有处理哦)
    pageY = clientY document.documentElement.scrollTop || document.body.scrollTop; (同上)
  屏幕的坐标:
    screenX
    screenY (这两个属性我从来没有用过..)
  修改键(热键,也叫快捷键):
  //这几个值都在事件对象下面;
    ctrlKey,
    shiftKey,
    altKey,
    metaKey( WINDOW中是窗口键, 苹果电脑是CMD键 )
    图片 2

可以使用如下方式对click事件删除;如下代码:

    相关元素(relateTarget):
      IE下没有relateTarget这个东东, 有个toElement和fromElement;这个属性没啥用, 唯一的用处就是在不支持mouseenter以及mouseleave的浏览器中模拟这两个事件(chrome低版本);

btn.removeEventListener('click',handler);

    鼠标按钮:
      平常用的不多,就是在鼠标按下去的时候是鼠标左键还是中键还是鼠标右键的区别;
      IE8以及之前对鼠标的按键的规定和DOM3区别很大,DOM3是这样规定的:
        0:鼠标左键,
        1:鼠标中键(滚动键);
        2:鼠标右键;
    因为IE和DOM2,DOM3按钮事件属性(event)都有button这个属性,必须通过hasFearture进行判断(也没有别的方法了吧,soga),so,兼容代码要如下:

上面的是在标准浏览器下处理的事件,下面我们来看看在IE下处理的事件;

            if( document.implementation.hasFearture("MouseEvents","2.0")return event.button,
            else{
                swtich( event.button ) {
                    case 0:
                    case 1:
                    case 3:
                    case 5:
                    case 7:
                        return 0;
                    case 2:
                    case 6:
                        return 2;
                    case 4 :
                        return 1
                };
            }

IE事件处理的程序

 

IE实现了与DOM类似的2个方法,分别是attachEvent()和detachEvent(),这两个方法只接受2个参数,第一个参数是事件名称,第二个参数是要处理的函数;由于IE8及更早版本只支持事件冒泡,所以通过attachEvent()添加的事件处理程序会被添加到冒泡阶段;

  

下面是IE事件处理程序的代码如下:

   现在到了滚轮事件了:

btn.attachEvent('onclick',handler);  function handler(e){      alert(this); // window  }

    IE和chrome以及opera的鼠标滚轮滚动都是通过event.wheelDelta标识的;
    如果滚轮是向上滚动那么wheelDelta为120,向下值为-120; 哇擦家里么哟鼠标, 笔记本的滚轮怎么滚啊,( ̄Q ̄)╯,先贴代码吧,

注意:attachEvent的事件名称是onclick,而addEventListener的事件名称是click,且IE中使用的attachEvent()与使用DOM0级方法的的主要区别在于事件处理程序的作用域,在使用dom0级情况下,事件处理程序在其所属元素的作用域内运行,在使用attachEvent()方法的情况下,事件处理程序在全局作用域下运行,其中的this等于window。

  

与addEventListener一样,attachEvent也可以注册多个点击click事件,如下代码:

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>事件的类型</title>
            <meta charset="UTF-16" />
        </head>
        <body>
        <style>
            #btn{
                overflow: auto;
                width:400px;
                height:400px;
                background: #f0ad4e;
            }
        </style>
        <div id="btn"> xx
            <div>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>hehe
                <br>
                <br>
                <br>
                <br>
                <br>hehe
                <br>
                <br>
                <br>
                <br>
                <br>hehe
                <br>
                <br>
                <br>
                <br>
                <br>hehe
                <br>
                <br>
                <br>
                <br>
                <br>hehe
            </div>
        </div>
        <pre>

        </pre>
        <script>
        var eventUtil = {
            add : function(el, type, handler) {
                if(el.addEventListener) {
                    el.addEventListener(type, handler, false);
                }else if( el.attachEvent ) {
                    el.attachEvent("on" type, handler);
                }else{
                    el["on" type] = handler;
                }
            },
            off : function(el, type, handler) {
                if( el.removeEventListener ) {
                    el.removeEventListener(type, handler, false)
                }else if( el.detachEvent ) {
                    el.detachEvent(type, handler);
                }else{
                    el["on" type] = null;
                }
            }
        };
        var eBtn = document.getElementById("btn");
        eventUtil.add(eBtn,"mousewheel",function(ev) {
            ev = ev || window.ev;
            console.log(ev.wheelDelta);
        })
        /*
        * */
        </script>
        </body>
        </html>
btn.attachEvent('onclick',function(e){      alert("1");  });  btn.attachEvent('onclick',function(e){      alert("2");  });

 

但是与Dom方法不同的是,这些事件处理程序不是以添加他们的顺序执行,而是以相反的顺序触发,比如如上代码,会先弹出2,然后弹出1对话框;

  

使用attachEvent注册的事件只能使用detachEvent()方法来移除;

  火狐到了现在还是没有mousewheel事件,我要喷了,还是要使用DOMMouseScroll这个事件进行绑定;
  火狐的滚轮的滚动属性值和chrome和ie都不一样,是一个叫做detail的属性,而且向上的值为-3,向下为3(方向反了,这样记比较好记);
  要写出兼容代码,要这样

下面我们可以来编写跨浏览器的事件处理程序;代码如下:

  

var EventUtil = {      addHandler: function(element,type,handler) {          if(element.addEventListener) {                          element.addEventListener(type,handler,false);          }else if(element.attachEvent) {                      element.attachEvent("on" type,handler);          }else {              element["on"  type] = handler;          }      },      removeHandler: function(element,type,handler){          if(element.removeEventListener) {                      element.removeEventListener(type,handler,false);          }else if(element.detachEvent) {                      element.detachEvent("on" type,handler);          }else {              element["on"  type] = null;          }      }  };
        var eBtn = document.getElementById("btn");
        eventUtil.add(eBtn,"mousewheel",wheel)
        eventUtil.add(eBtn,"DOMMouseScroll",wheel);
        wheel = function() {
            ev = ev || window.ev;
            if(ev.wheelDelta) {
                return ev.wheelDelta
            }else{
                return - ev.detail*3
            }
        }

下面我们可以使用这个封装的函数代码来测试之前的代码了,代码改成如下所示:

 

function handler(){      alert(1);  }  EventUtil.addHandler(btn,'click',handler);

 

在IE或者标准浏览器下都会弹出1;如果我们需要移除click事件的话,我们可以使用如下代码:

  键盘事件:
    keydown,(如果用户按住不放会重复触发,而且这个键有点延迟,,)
    keypress,(如果用户按住不放会重复触发,而且这个键有点延迟,)
    keyup,
    textInput (这个事件是DOM3新增的)
    事件的属性信息:
      既然是用户输入,那么肯定要有一个是字符串的信息的事件属性,猜都不用猜的
      要跨浏览器获取用户输入的字符串编码,可以通过,

EventUtil.removeHandler(btn,'click',handler);

        if( typeof event.charCode === "number") {
            return event.charCode;
        }else{
            return event.keyCode;
        };

然后在标准浏览器下或者IE下点击btn元素都没有反应;

 

事件对象:

  keyCode这个值是包含了回车,制表符,箭头数字键盘,f1,f12所有键盘的数值;

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息;包括导致事件的元素,事件的类型以及其他与特定事件相关的信息。我们来看看dom0级和dom2级的事件对象Event;

*  charCode只是表示按下字符的ascll编码;*

比如如下代码:

   

var btn = document.getElementById("btn");  btn.onclick = function(e){      console.log(e);  }

  好了好了,睡觉去了,眼睛要常休息下;

打印如下:

  图片 3

图片 4

  

下面我们来看看最基本的成员的含义吧;如下:

属性/方法

类型

含义

bubbles

Boolean

事件是否冒泡

cancelable

Boolean

是否可以取消事件的默认行为

currentTarget

Boolean

事件处理程序当前正在处理事件的那个元素

defaultPrevented

Boolean

为true 表示已经调用了preventDefault()

detail

Integer

与事件相关的细节信息

eventPhase

Integer

调用事件处理程序的阶段:1表示捕获阶段,2表

示“处于目标”,3表示冒泡阶段

preventDefault()

Function

取消事件的默认行为。如果cancelable是

true,则可以使用这个方法

stopImmediatePropagation()

Function

取消事件的进一步捕获或冒泡,同时阻止任何

事件处理程序被调用

stopPropagation()

Function

取消事件的进一步捕获或冒泡。如果bubbles

为true,则可以使用这个方法

target

Element

事件的目标

type

String

被触发的事件的类型

view

AbstractView

与事件关联的抽象视图。等同于发生事件的

window对象

理解currentTarget与target

在事件处理程序内部,this始终等于currentTarget值,即currentTarget是指当前被触发或者说正在处理事件的那个元素,而target是指当前的目标元素;比如如下代码,对btn按钮触发点击事件,那么e.currentTraget指向了this,e.target也指向了this;如下代码:

var btn = document.getElementById("btn");  btn.onclick = function(e){      console.log(e.currentTarget == this); // true      console.log(e.target == this);  // true  }

本文由澳门正规赌博十大网站发布于澳门游戏网站,转载请注明出处:JS中的事件类型和事件属性的基础知识,Javascri