javascript文档对象模型-事件操作(二)

作者: 鲁智深 分类: JAVASCRIPT 发布时间: 2016-04-11 11:44

鼠标的相对坐标值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标的相对坐标值</title>
    <style>
        body {
            margin: 0px;
        }
        #show {
            width: 300px;
            height: 300px;
            background-color: lightcoral;
            position: absolute;
            top: 100px;
            left: 200px;
            margin-bottom: 100px;
            margin: 0 auto;
        }
        #show1 {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            position: absolute;
            top: 500px;
            left: 200px;
        }
    </style>
</head>

事件周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件周期</title>
    <style>
        #d1 {
            width: 300px;
            height: 300px;
            padding: 50px;
            background-color: lightslategray;

            position: relative;
        }

        #d2 {
            width: 200px;
            height: 200px;
            padding: 50px;
            background-color: lightseagreen;

            position: relative;
        }

        #d3 {
            width: 100px;
            height: 100px;
            padding: 50px;
            background-color: lightcoral;
        }
    </style>
</head>

<body>
    <div id="d1">
        <div id="d2">
            <div id="d3"></div>
        </div>
    </div>
    <script>      
        /*
            addEventListener()方法的第三个参数
            * true - 捕获阶段,依次向里传递,火狐提出来的
            * false - 默认值,冒泡阶段,依次向外传递,ie提出来的
        */
        var d1 = document.getElementById('d1');
        var d2 = document.getElementById('d2');
        var d3 = document.getElementById('d3');

        d1.addEventListener('click',function(){
            console.log('d1');
        })

        d2.addEventListener('click',function(){
            console.log('d2');
        })

        d3.addEventListener('click', function () {
                console.log('d3');
        })
    </script>
</body>

</html>

阻止冒泡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>03 阻止冒泡</title>
    <style>
        #d1 {
            width: 300px;
            height: 300px;
            padding: 50px;
            background-color: lightslategray;

            position: relative;
        }

        #d2 {
            width: 200px;
            height: 200px;
            padding: 50px;
            background-color: lightseagreen;

            position: relative;
        }

        #d3 {
            width: 100px;
            height: 100px;
            padding: 50px;
            background-color: lightcoral;
        }
    </style>
</head>

<body>
    <div id="d1">
        <div id="d2">
            <div id="d3"></div>
        </div>
    </div>
    <script>
        /*
            addEventListener()方法的第三个参数
            * 值为true或false,捕获阶段或冒泡阶段
            * 在当前方法中,没有办法直接既不使用捕获,也不使用冒泡
            W3C组织提供的解决方案
            * 建议调用addEventListener()方法时 -> 使用冒泡阶段
            * 默认值就是冒泡阶段
            * 通过Event事件对象的stopPropagation()方法将冒泡取消
        */
        var d1 = document.getElementById('d1');
        var d2 = document.getElementById('d2');
        var d3 = document.getElementById('d3');

        d1.addEventListener('click', function () {
            console.log('d1');
            event.stopPropagation();
        })

        d2.addEventListener('click', function () {
            console.log('d2');
            event.stopPropagation();
        })

        d3.addEventListener('click', function () {
            console.log('d3');
            event.stopPropagation();
        })
    </script>
</body>

</html>

事件委托

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
</head>

<body>
    <button id="add">添加</button>
    <ul id="phone">
        <li>
            <a href="#">苹果</a>
        </li>
        <li>
            <a href="#">小米</a>
        </li>
        <li>
            <a href="#">锤子</a>
        </li>
    </ul>
    <script>
        //添加li,并有返回输出
        //Event 事件对象提供了 target 属性用于获取触发事件的目标元素(标签)。
        var phone = document.getElementById('phone');//找的父级节点
        phone.addEventListener('click',function() {
            if(event.target.nodeName === 'A'){//如果节点是元素节点,则 nodeName 属性返回标签名
                console.log(event.target);//相当于触发了父级元素中所有的字元素
            }
        });

        //添加li
        var add = document.getElementById('add');
        add.addEventListener('click',function(){
            var li = document.createElement('li')
            li.innerHTML = '<a href= "#">锤子</a >';
            phone.appendChild(li);
        });
    </script>
</body>

</html>

键盘事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <style>
        body {
            margin: 0px;
            height: 600px;
            background-color: lightslategray;
        }
    </style>
</head>

<body>
    <input type="text" id="data">
    <script>
        var body = document.body;//获取body节点
        //keypress 键盘按键事件
        body.addEventListener('keypress',function(event){
            console.log(event);
        });
        /*
            event事件对象
            * key - 获取当前操作的按键(a)
            * code - 获取当前操作的按键(KeyA)
            * keyCode/charCode - 获取当前操作的按键(Unicode值)
              * charCode -> 可能获取失败
         */
         /*
            * a-z -> 97-122
            * 0-9 -> 48-57
            * A-Z -> 65-90
            * 空格 -> 32
            * 回车 -> 13
            * 上下左右 -> 38 40 37 39
         */
    </script>
</body>

</html>

动态操作元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态操作元素</title>
    <style>
        body {
            margin: 0px;
            height: 600px;
        }

        #box {
            width: 30px;
            height: 30px;
            background-color: lightcoral;
            position: absolute;
            left: 0px;
            top: 30px;
        }
    </style>
</head>

<body>
    <li>键盘按键向右向下</li>
    <div id="box"></div>
    <script>
         //开启相对定位,控制left来控制div的位置
         //keydown当键盘按钮被按下时,发生 keydown 事件
         var body = document.body;
         body.addEventListener('keydown',function(event){
             if(event.keyCode === 39){//向右
                 var box = document.getElementById('box');
                 var style = window.getComputedStyle(box, null);              
                 var left = parseInt(style.left);
                 left += 10;
                 console.log(left);
                 box.style.left = left + 'px';
             }else if(event.keyCode === 40){//向下
                 var box = document.getElementById('box');
                 var style = window.getComputedStyle(box, null);
                 var top = parseInt(style.top);
                 top += 10;
                 console.log(top);
                 box.style.top = top + 'px';
             }
         });
    </script>
</body>

</html>

鼠标右键菜单事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鼠标右键菜单事件</title>
    <style>
        body {
            margin: 0px;
            height: 800px;
        }

        #show {
            width: 300px;
            height: 300px;
            background-color: lightcoral;
            position: absolute;
            left: 300px;
        }
        #menu {
            width: 50px;
            height: 100px;
            background-color: rgb(152, 128, 240);
            display: none;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="show"></div>
    <div id="menu"></div>
    <script>
        // contextmenu 右键事件
        var body = document.body;
        body.addEventListener('contextmenu',function(){
             // 阻止右键菜单效果
             event.preventDefault();
        });

         // 但是在div页面中,实现鼠标右键打开菜单效果
         var show =document.getElementById('show');
         show.addEventListener('contextmenu',function(){
            if (event.button === 2) {
                 // 提供自定义菜单
                 menu.style.display = 'block';
                 menu.style.left = event.clientX + 'px';
                 menu.style.top = event.clientY + 'px';
             } else if (event.button === 0) {
                 menu.style.display = 'none';
             }
         });
    </script>
</body>

</html>

鼠标按下或释放事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鼠标按下或释放事件</title>
    <style>
        body {
            margin: 0px;
            height: 800px;
        }

        #box {
            width: 30px;
            height: 30px;
            background-color: lightcoral;
            position: absolute;
            left: 200px;
            top: 200px;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        //mousedown鼠标在<div>元素的区域中,按下鼠标按键,该事件才被触发
        var box = document.getElementById('box');
        box.addEventListener('mousedown',function(){
            var style = getComputedStyle(box,null);
            var left = parseInt(style.left);
            var top = parseInt(style.top);
           
            //做随机数,Math.floor取整 Math.random随机,2~20之间
            /* var x = Math.floor(Math.random() * 159 + 1);
            var y = Math.floor(Math.random() * 159 + 1); */

            //在当前窗口随机动--》window.innerWidth可视窗口的宽度
            var x = Math.floor(Math.random() * window.innerWidth - parseInt(style.width));
            var y = Math.floor(Math.random() * window.innerHeight - parseInt(style.height));

            //替换样式
            box.style.left =  x + 'px';
            box.style.top = y + 'px';
        });
    </script>
</body>

</html>

鼠标悬停事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鼠标悬停事件</title>
    <style>
        #girl {
            width: 100px;
            position:absolute;
            left: 300px;
            top: 100px;
        }

        #show {
            width: 800px;
            height: 500px;
            border: 1px solid lightgrey;
            display: none;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <img id="girl" src="girl.png">
    <div id="show">
        <img src="girl.png">
    </div>
    <script>
        /*
            鼠标悬停事件
            * mouseover - 表示鼠标悬停在某个元素上
            * mouseout - 表示鼠标从某个元素上移开
            * mousemove - 表示跟随鼠标移动事件
         */

         var girl = document.getElementById('girl');
         girl.addEventListener('mouseover',function(){
             var show = document.getElementById('show');
             show.style.display = 'block';
             show.style.left = event.pageX + 10 + 'px';//pageX鼠标相对于页面的坐标
             show.style.top = event.pageY + 10 + 'px';//为什么要加10,鼠标和图片重合不停闪烁
         })
         
         girl.addEventListener('mousemove',function(){
             var show = document.getElementById('show');
             show.style.left = event.pageX + 10 + 'px';
             show.style.top = event.pageY + 10 + 'px';
         })

         girl.addEventListener('mouseout', function (event) {
                show.style.display = 'none';
        });

    </script>
</body>

</html>

鼠标拖拽效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鼠标拖拽效果</title>
    <style>
        body {
            margin: 0px;
        }
        #show {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>

<body>
    <div id="show"></div>
    <script>
        /*
            mousedown 当在段落上按下鼠标按钮时执行一段 JavaScript
            mousemove 表示跟随鼠标移动事件
            mouseup 当在段落上松开鼠标按钮时执行
        */
         var show = document.getElementById('show');
         var bool = false;
         var offsetX,offsetY;      
         show.addEventListener('mousedown',function(){
            bool = true;
            offsetX = event.offsetX;
            offsetY = event.offsetY;  
         });
       
        /*
           为什么要用document而不是show?
           show是鼠标跟随div运动,如果设置成document,鼠标是定位是整个文档,div跟着鼠标运动
           用 document 后鼠标不触发,div就会一直跟随,所以要设置变量开关
        */
         document.addEventListener('mousemove',function(event){
             if(bool){
                var pageX = event.pageX;
                var pageY = event.pageY;
                show.style.left = pageX - offsetX + 'px';
                show.style.top = pageY - offsetY + 'px';
             }
         });

         show.addEventListener('mouseup',function(){
             bool = false;
         });
    </script>
</body>

</html>

动态加载图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动态加载图片</title>
    <style>
        body {
            margin: 0px;
            overflow: hidden;
        }

        img {
            width: 100%;
            height: 100%;
            display: none;
        }
    </style>
</head>

<body>

    <img id="myimg" src="http://i1.cfimg.com/506310/e1fec89de9ae4f00.jpg">
    <script>
        //onload页面加载之后立即执行一段 JavaScript:
        var myimg = document.getElementById('myimg');
        myimg.addEventListener('load',function() {
            myimg.style.display = 'block';
        })

        // 获取窗口当前的宽度和高度 -> 跟随当前的宽度和高度设置图片的显示
        //onresize 事件会在窗口或框架被调整大小时发生
         window.addEventListener('resize', function(){
                myimg.style.width = window.innerWidth + 'px';
                myimg.style.height = window.innerHeight + 'px';
         })
    </script>
</body>

</html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注