JS——事件

我发现了对于<a>如果有onclick的话，就先执行onclick然后在href，其实很简单，如果onclick是“return false”的话，就不会再执行href跳转了

 <a href="http://baidu.com" onclick=" return Test();">戳我</a>     
    <script>
        function Test() {
            alert("123");
            return false;
        }
    </script>
注意：要想阻止跳转，就必须onclick=“return false;” 如果是方法的话，必须在方法前加return，因为方法返回的是 false这个值，必须再加return才能阻止默认的跳转

onload事件：页面都加载完成后才执行
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <script>
        alert(1111111111111);
    </script>
</head>
<body onload="alert(22222222222222);">
    <a href="http://baidu.com" onclick=" return Test();">戳我</a>
    <script>      
            alert(33333333);                 
    </script>
</body>
<script>
    alert(44444);
</script>

</html>

弹出的结果是   1  3   4   2

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <script>
        t = function () {
            alert(1111);
        }
    </script>
</head>
<body onload="t();">
    <a href="http://baidu.com" onclick=" return Test();">戳我</a>
    <script>alert(222);</script>
</body>

</html>

先弹出   222  在弹出   1111

还可以写成这样，效果相同

<script>
        
        t = function () {
            alert(1111);
        }
        window.onload = t;
    </script>
</head>
<body >
    <a href="http://baidu.com" onclick=" return Test();">戳我</a>
    <script>alert(222);</script>
</body>

我发现一个奇怪的现象：对于事件来说，在调用的是  事件名=方法名（方法行的变量而不是 方法名()）,好奇怪，也可以写成  事件名="方法名();"

<script>
        window.onload = function () {
            alert(1111);
        }
    </script>
</head>
<body>
    <a href="http://baidu.com" onclick=" return Test();">戳我</a>
    <script>alert(222);</script>
</body>

在一个事件处理程序里，event代表该事件对象，而event.srcElement代表发生事件的事件源对象

<script>
        Test = function () {
            event.srcElement.innerText = "abc";
        }
    </script>
</head>
<body>
   <div onclick="Test()">111111111111</div>
    <p onclick="Test()">22222222222</p>
</body>

等同于

<script>
        Test = function (obj) {
            obj.innerText = "abc";
        }
    </script>
</head>
<body>
   <div onclick="Test(this)">111111111111</div>
    <p onclick="Test(this)">22222222222</p>
</body>

 这个event事件对象呢，除了 srcElement以外还有keyCode还有clientX等，

<div id="d"></div>
    <script>
        var d = document.getElementById("d");
        document.onmousemove = function () {
            // var ex = e || window.event;    解决浏览器兼容event问题
            var cx = event.clientX;  
            var cy = event.clientY;
            var sx = event.screenX;
            var sy = event.screenY;

            var str = "cx=" + cx + "cy=" + cy + "sx=" + sx + "sy=" + sy;
            d.innerText = str
        }
    </script>

clientX clientY是指客户端浏览器窗口的x和y的距离，而screenX和screenY则是到整个屏幕的x和y的距离，结果如下

 

冒泡事件

<div onclick="t1()">1111<div onclick="return t2();">2222</div></div>
    
    <script>

        function t1() {
            alert(1);
        }
        function t2() {
            alert(2);
           // window.event.cancelBubble=true;  阻止事件冒泡
           
        }
    </script>

正常情况下，点击111弹出1   点击2222弹出2在弹出1，这就是冒泡，阻止冒泡也很简单，如上就可以了

 

posted on 2017-03-08 23:29  奔游浪子  阅读(82)  评论(0)    收藏  举报

导航