事件绑定及阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--基本style样式-->
    <style type="text/css">
        #box1{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            text-align: center;
        }
        #sp{
            background-color: yellow;
        }
        #box2{
            width: 300px;
            height: 300px;
            background-color: #FF0000;
        }
    </style>
    <script type="text/javascript">
        /*
        绑定事件及阻止事件冒泡    cancel:阻止 Bubble:泡泡;
         */
        window.onload = function () {

            var s1 = document.getElementById('sp');
            s1.onclick = function (event) {
                event = event || window.event; // 这里的做法是为了兼容;
                alert("I'm span click.");
                event.cancelbubbles = true;
            }

            var box1 = document.getElementById('box1');
            box1.onclick = function (event){
                event = event || window.event;
                event.cancelbubbles = true;
                alert("我是box移出触发.");
            }

            var boddy = document.getElementById('boddy');
            boddy.onclick = function () {
                alert('我是boddy点击测试');
            }

        }

    </script>
</head>
<body id="boddy">
<div id="box1">
    I'm box1
    <span id="sp">I'm span</span>
</div>
</body>
</html>

绑定事件及addEventListener用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--基本style样式-->
    <style type="text/css">
        #box1{
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            text-align: center;
        }
        #sp{
            background-color: yellow;
        }
        #box2{
            width: 300px;
            height: 300px;
            background-color: #FF0000;
        }
    </style>
    <script type="text/javascript">
        /*
        绑定事件及阻止事件冒泡    cancel:阻止 Bubble:泡泡;
         */
        window.onload = function () {

            var s1 = document.getElementById('sp');
            s1.onclick = function (event) {
                event = event || window.event; // 这里的做法是为了兼容;
                alert("I'm span click.");
                event.cancelbubbles = true;
            }

            var box1 = document.getElementById('box1');
            box1.onclick = function (event){
                event = event || window.event;
                event.cancelbubbles = true;
                alert("我是box移出触发.");
            }

            var boddy = document.getElementById('boddy');
            boddy.onclick = function () {
                alert('我是boddy点击测试');
            }

        }

    </script>
</head>
<body id="boddy">
<div id="box1">
    I'm box1
    <span id="sp">I'm span</span>
</div>
</body>
</html>

键盘事件基本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KeyEvent</title>
    <script type="text/javascript">
        window.onload = function () {
           document.onkeydown = function (event) {
               /*
               这里可以通过key方法获取键值；这里主要属性主要分为：
               - key
               - altkey
               - ctrlkey
               - shiftkey
                */
               console.log('trigger keydown.');
               //这里做了个单键判断输出
               if(event.key === 'y'){
                   console.log('Conntiue.....');
               }else if (event.key === 'n'){
                   console.log('cancel');
               }
           }
           //测试当按下键松开
           document.onkeyup = function () {
              console.log('trigger keyup.');
           }
           //测试ctrl和c键同时按下判断出发输入console.log；
            document.onkeydown = function (event) {
                if (event.ctrlKey && event.key === 'c'){
                    console.log('ctrl and c touched....');
                }
            }
        }
    </script>
</head>
<body>
<input type="text">
</body>
</html>

Jensen_79

发布了39 篇原创文章 · 获赞 13 · 访问量 3370

私信关注

Javascript事件操作04

JS事件操作

事件绑定及阻止事件冒泡

绑定事件及addEventListener用法

键盘事件基本操作

猜你喜欢