必赢亚洲手机app下载


实习才不会沦为跑龙套

您该知情的字体苹果电脑

JS中的事件类型和事件性质的基础知识

  周末无聊, 这几天又复习了下JS搞基程序设计3,
想着好记性不如浪笔头哇, 要么把这么些事物写下来,
那样基础才能更进一步朴实么么哒, 知情的同校也足以直接过一下,当做复习,
 大姐再也不用担心我的求学啦;

  从哪个地方初叶吧?????苹果电脑 1? ???????

 

  事件的系列

    DOM3确定了上边这几事变类型:
    UI事件;onload,resize,scoll等等;
    要害事件;
    鼠标事件;
    滚轮事件;
    文本事件;
    键盘事件;
    变动事件;(用的也少);
    变更名称事件,当元素的特性名暴发变更的时候接触(没啥用,
要弄编辑器的时候才用取得);

      UI事件:
      “DOMActivate”  :
 元素被用户操作(鼠标或者键盘激活)会接触的轩然大波, chrome(38)有效,
firefox(34)下无效, 代码如下,点击即可打开查看:

    

        <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>

 

 

    “onload” : 会在window, object 以及
img上面触发(PS:IE8和IE8以前的script标签不支持onload,
可是扶助onreadystatechange, IE家族中享有因素都支持那一个情况属性么么哒)
    “unload” : window.onuload , object.onunload
,图像不触发onunload;

<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>

 

 

 

  “error” : 当一个js代码执行暴发错误的时候接触, 或者img,
object, script等急需请求远程资源的价签没有请求到, 就会接触这些事件,
那个事件实际上工作中用的不多。。 

        <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>

 

 

  “abort” :
用户甘休下载(用户问题)或者内容尚未加载完成(服务器问题), 就会触发;
  “resize” : 把窗口拉大拉小,
最大化和最小化也会触发那一个事件(在运动端上的onoritatinochange反应很慢,就足以用resize代替),而且火狐的低版本是等到用户停止resize才会执行事件函数;
  “scroll” : 滚动,紧借使window.onscroll这么些事件。

  resize事件的举行快的话70毫秒,慢的话100阿秒执行三次,DEMO, 你把界面resize一下,然后快一点点击cacl
那个按钮测试浏览器平均多长时间执行五次resize的轩然大波,别怪我懒啊,练习你的反应力的时候到了,懂吗
\\~_~///;

<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>

 

  主题事件 : 主题事件可以得到用户在界面上的行踪;
    blur : 失去大旨的 时候触发, 不冒泡;
    focus : 这一个是聚焦的时候发出, 不冒泡;
    DOMFocusIn : 这么些日子和
focusin一样,只是DOM三抉择了focusin
    DOMFocusOut : 这些时刻和
focusout一样,只是DOM3增选了focusout
    focusin :冒泡的聚焦事件;
    focusout : 冒泡的失焦事件;

    检测关键事件的代码如下,只可以说火狐不给力,:

<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>

 

 

  

  鼠标和滚轮你事件:
    DOM3规定了9个鼠标事件(………)你数一数,是或不是刚刚九个;
    click:一般是左键触发那些事件,右键是触发右键菜单,若是当前的元素获得大旨,那么大家按回车(enter)也会触发click事件,
那个DEMO不是让你点击,是让你在按钮聚焦的状态下按enter键

    <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>

苹果电脑, 

  dblclick:鼠标双击的时候接触,有时候有用,
如若dblclick触发了也会触发click的风浪;

  

    <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>

 

  

  事件名字假若蕴含mouse, 都只能够通过鼠标的触发比如,
不可以透过键盘触发的轩然大波:
    mousedown,
    mousemove,
    mouseout,
    mouseover,
    mouseup
    mouseenter, (要留心这么些事件, chrome的高版本才支撑的,
那么些事件是ie先弄出来的,jQ有做同盟处理所以在chrome下可以使用那几个事件)  
    mouseleaver (要注意这么些事件, chrome的高版本才支撑的,
那些事件是ie先弄出来的,jQ有做合营处理所以在chrome下得以选用这么些事件);

 

 

  因为常用的点击都是鼠标左键,
所以要触发dblclick会触发超过半数的mouse事件;
  比如您要触发dblclick, 也会相继触发
   1: mousedown
   2: mouseup
   3: click
   4: mousedown
   5: mouseup
   6: click
   7: dblclick;

  要检测鼠标事件的匹配通过:
    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, 我勒个去;

  事件指标的属性:
  客户坐标的值:
    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

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

    鼠标按钮:
      日常用的不多,就是在鼠标按下来的时候是鼠标左键依旧中键仍然鼠标右键的分别;
      IE8以及以前对鼠标的按键的规定和DOM3分别很大,DOM3是那般确定的:
        0:鼠标左键,
        1:鼠标中键(滚动键);
        2:鼠标右键;
    因为IE和DOM2,DOM3按钮事件属性(event)都有button那么些特性,必须经过hasFearture进行判定(也并未其他艺术了吧,soga),so,包容代码要如下:

            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和chrome以及opera的鼠标滚轮滚动都是通过event.wheelDelta标识的;
    即使滚轮是进步滚动那么wheelDelta为120,向下值为-120; 哇擦家里么哟鼠标,
台式机的滚轮怎么滚啊,( ̄Q ̄)╯,先贴代码吧,

  

        <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>

 

  

  火狐到了现行要么尚未mousewheel事件,我要喷了,仍然要使用DOMMouseScroll本条事件进行绑定;
  火狐的滚轮的滚动属性值和chrome和ie都不等同,是一个名叫detail的性能,而且发展的值为-3,向下为3(方向反了,那样记相比好记);
  要写出同盟代码,要这么

  

        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
            }
        }

 

 

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

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

 

  keyCode这几个值是包蕴了回车,制表符,箭头多功能键盘,f1,f12所有键盘的数值;

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

   

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

  苹果电脑 3

  

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图