Javascript事件操作04

最新推荐文章于 2024-03-14 17:46:45 发布

Jensen_79

最新推荐文章于 2024-03-14 17:46:45 发布

阅读量231

点赞数

分类专栏： JavaScript 文章标签： JavaScript 基础

本文链接：https://blog.csdn.net/qq_30036471/article/details/99861308

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS事件操作

事件绑定及阻止事件冒泡
绑定事件及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>

绑定事件及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

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript事件操作04

JS鼠标事件操作事件绑定及阻止事件冒泡绑定事件及addEventListener用法事件绑定及阻止事件冒泡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--基本styl...
复制链接

扫一扫

专栏目录