js捕获事件

作者: _士心_ | 来源:发表于2016-05-10 12:19 被阅读32次

    0级事件处理

    用的最多的就是onload了

    
    <script>
    //内嵌模式()
     <body onload="alert("工大学子")">
     <body onload="hello();">
     注意小括号引号这类的  和下面的不同
    或者在js里的
    </script>
    
    <script>
    //传统模式(推荐)
    window.onload=function(){
        ......
        alert(“工大学子”);
    }
    //window.onload=hello();
    </script>
    
    
    

    结束function 终止事件

    function() doSomething{
        return false;
        
    }
    

    提醒一下function name(){。。。}这是function的格式 name的位置还有小括号的位置......

    指定多个函数

    <body onload="hello();hello2()">
    
    传统模式
    function(){
        var helloString="hello you ";
        alert(helloString);
        hello2();
        在这里调用第二个
        }
    

    除了onload 还有onmouseover onmouseout onclick
    这个好像用的更多 但提醒一下css的伪类hover有时候用的更方便一点

    event对象

    例:window.event.screenX

    我们可以通过event干好多事情
    我记住的就screenX还有screenY 指事件触发时屏幕的x y值;

    clientX客户端当前x
    clientY客户端当前y

    有什么区别自己回去查

    event的兼容性

    ie是

    function onmouseover(){
    。。。
    //小括号里没有东西 ie默认是通过程序访问window对象其包含的数据也会相应填充
    }
    docunment.onmouseover=onmouseover
    

    其他浏览器(基于netscape)是:

    function onmouseover(theEvent){
    //括号里有东西。。。
    }
    docunment.onmouseover=onmouseover
    

    所以考虑兼容用下面的方法

    <script>
    function onmousedown(nsEvent){
        var theEvent=nsevent?nsevent:window.event;
        //看看nsEvent是否被定义
        var locString="x="+theEvent.screenX+"y="+theEvent.screenY;
        alert(locString);
    }
    </script>
    document.onmousedown=onmousedown;
    

    事件冒泡

    就是你给一个爷爷辈父亲辈儿子辈的三个div分别写三个一样的触发时间假设都是onclick 你会发现当你点击儿子时爷爷和爸爸的onclick都被触发
    不理解的回去写三个嵌套的div试试;

    取消冒泡机制
    ie:cancelBubble
    mozilla:stopPropagation

    function stopEvent(evnt){
        if(evnt.stopPropagation){
            evnt.stopPropagation}
        else{
            evnt.cancelBubble=true;
        }
    }
    document.getElementById("ididid").onmouseover=function(evnt){
        var theEvent=evnt?evnt:window.event;
        alert("鬼一样的ie");
        stopEvent(theEvent);
        //调用上面写的stopEvent函数;
        }
    

    this

    经常见
    当前调用的函数或方法的所有者
    对全局函数就是window

    事件捕获一个用途

    在html里你在写一个id为myid的一个input 就会实现打开网页 这个input自动获得焦点。。。。。百度的效果

    window.onload=myFunction;
    function myFunction(){
        document.getElementById(""myid").focus();
    }
    

    相关文章

      网友评论

        本文标题:js捕获事件

        本文链接:https://www.haomeiwen.com/subject/dihyrttx.html