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

作者: 鲁智深 分类: JAVASCRIPT 发布时间: 2016-04-01 00:38

注册事件

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>08 注册事件</title>
</head>

<body>
    <!-- 一、HTML的事件属性 -->
    <button onclick="myClick()" id="btn1">按钮</button>
     <script>
         function myClick() {
             console.log('这是HTML的事件属性');
         }
     </script>

    <button id="btn2">按钮</button>
    <button id="btn3">按钮</button>
    <script>
         //二、为button绑定onclick事件
         var btn2 = document.getElementById('btn2');
         btn2.onclick = function(){
             console.log('这是button绑定onclick事件');
         }

         /*
         三、添加事件的监听器
            element.addEventListener(type, listener[, options])
            * 参数
            * type - 表示当前注册监听的事件类型(名称)
                * 事件类型(名称)没有前缀on的,比如:click
            * listener - 表示当前注册监听事件的回调函数(事件的处理函数)
            * options - 可选,表示是冒泡还是捕获阶段
                * 一般默认就行,省略
            但是:在ie8浏览器里面存在兼容问题
        */
        var btn3 = document.getElementById('btn3');
         btn3.addEventListener('click',function(){
             console.log('这是添加事件的监听器');
         });
    </script>
</body>

</html>

图1

onclik绑定事件

onclik绑定事件

图2

添加事件监听器

添加事件监听器

注册事件对比覆盖问题

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>09 注册事件对比覆盖问题</title>
</head>

<body>
    <button id="btn">按钮</button>
    <button id="btn1">按钮</button>
    <script>
        //为onclick绑定事件----被第二次覆盖
         var btn = document.getElementById('btn');
         btn.onclick = function(){
             console.log('第一次');
         }
         btn.onclick = function(){
             console.log('第二次');
         }

         //添加事件监听器----》没有被覆盖
         var btn1 = document.getElementById('btn1');
         btn1.addEventListener('click',function(){
             console.log('事件监听器第一次');
         });

         var btn1 = document.getElementById('btn1');
         btn1.addEventListener('click',function(){
             console.log('事件监听器第二次');
         });
    </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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>监听器的问题</title>
</head>

<body>
    <button id="btn">按钮</button>
    <script>
/*         //IE 8 及之前的版本浏览器并不支持 addEventListener() 方法
        var btn = document.getElementById('btn');
        btn.addEventListener('click',function(){
            console.log('这是addEventListener方法');
        })

        //IE 8 及之前的版本浏览器并不支持 addEventListener() 方法,而提供了如下方法实现:
        //但是谷歌浏览器不支持它
        //element.attachEvent(eventName, functionName)
        //注意 - 该事件名称(类型)具有前缀"on"
        btn.attachEvent('onclick',function(){
            console.log('这是attachEvent方法');
        });
         */
        //总结:相互不兼容

        //解决兼容问题
        var btn = document.getElementById('btn');
        function bnn(emt) {
            if(emt.addEventListener){
                emt.addEventListener('click', function () {
                    console.log('这是addEventListener方法');
                })
            }else if(emt.attachEvent){
                emt.attachEvent('onclick', function () {
                    console.log('这是attachEvent方法');
                });
            }
        }
        bnn(btn);

/*         //也可以
            bind(btn, 'click', function () {
                    console.log('xxx');
                });

                // 注册事件的浏览器兼容解决方案
                function bind(elem, eventName, functionName) {
                    if (elem.addEventListener) {
                        elem.addEventListener(eventName, functionName);
                    } else {
                        elem.attachEvent('on' + eventName, functionName);
                    }
                }
 */
    </script>
</body>

</html>

注册事件的this

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>11 注册事件的this</title>
    <style>
        ul {
            height: 200px;
            background-color: lightslategray;
        }

        li {
            height: 100px;
            background-color: lightseagreen;
        }

        a {
            background-color: lightcoral;
        }
    </style>
</head>

<body>
    <button id="btn">按钮</button>

    <ul id="parent">
        <li>
            <a href="#">链接</a>
        </li>
    </ul>

    <script>
        /*
            注册事件的处理函数中 - 存在this
            * this的含义不会根据注册事件方式的不同而变化
            * this的含义 -> 代表注册(绑定)事件的目标元素
        */
          var btn = document.getElementById('btn');
         //绑定事件
         btn.onclick = function(){
             console.log(this);//输出<button id="btn">按钮</button>和btn变量一个意思
         }
         
         //事件监听器
         btn.addEventListener('click',function(){
             console.log(this);//输出<button id="btn">按钮</button>和btn变量一个意思
         });

         //ul上面测试addEventListener
         var parent = document.getElementById('parent');
         parent.addEventListener('click',function(){
             console.log(this);//凡是点击ul元素内任何地方,输出ul节点内容
         });

         //ul上面测试attachEvent--》包含document对象 -> 代表的是window对象
         var parent = document.getElementById('parent');
         parent.attachEvent('onclick',function(){
             console.log(this);//凡是点击ul元素内任何地方,输出ul节点内容
         });
    </script>
</body>

</html>

注册事件的this兼容解决

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>12 注册事件的this兼容解决</title>
    <style>
        ul {
            height: 200px;
            background-color: lightslategray;
        }

        li {
            height: 100px;
            background-color: lightseagreen;
        }

        a {
            background-color: lightcoral;
        }
    </style>
</head>

<body>
    <ul id="parent">
        <li>
            <a href="#">链接</a>
        </li>
    </ul>
    <script>
        var parent = document.getElementById('parent');
        bind(parent, 'click', function () {
            /*
                浏览器的兼容问题
                1.其他浏览器 -> 绑定当前事件的目标元素
                2.IE 8浏览器 -> window 对象
             */
            console.log(this);
        });

        // 注册事件的浏览器兼容解决方案
        function bind(elem, eventName, functionName) {
            //如果浏览器能运行elem.addEventListener监听事件,类似onclick
            if (elem.addEventListener) {
            //输出事件函数
                elem.addEventListener(eventName, functionName);
            } else {
            //否则在ie8以下执行attachEvent监听事件,类似onclick
                elem.attachEvent('on' + eventName, function () {
                    //attachEvent方法中的函数执行后
                    //functionName再调用出function ()函数,每一个函数都是Function对象
                    //Function对象就能执行.call方法
                    //将目标元素传递给底层代码,替换this的指向问题
                    //call()返回结果包括指定的this值和参数。
                    functionName.call(elem);
                });
            }
        }
    </script>
</body>

</html>

事件对象 Event

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>13 事件对象</title>
</head>

<body>
    <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById('btn');
        /*
            事件对象Event
        */
        //ie8以上使用
         btn.addEventListener('click',function(event){
            console.log(event);
        });
       
        //ie8包括以下使用
        btn.attachEvent('onclick',function(){
            console.log(event);
        });
        //总结:如果attachEvent事件监听器中function函数中没有形参,event照样能调用,说明一个问题是
        //event对象是作为 window 对象的属性出现




        bind(btn, 'click', function (event) {
                var e = event || window.event;//没必要搞啊,不做这一步也是可以的啊??????
                console.log(e);
            });

            function bind(elem, eventName, functionName) {
                if (elem.addEventListener) {
                    elem.addEventListener(eventName, functionName);
                } else {
                    elem.attachEvent('on' + eventName, function () {
                        functionName.call(elem);
                    });
                }
            }
    </script>
</body>

</html>

绑定元素的目标元素 event.target

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>14 绑定元素的目标元素</title>
    <style>
        ul {
            height: 150px;
            padding: 50px 0;
            background-color: lightslategray;
        }

        li {
            height: 50px;
            padding: 50px 0;
            background-color: lightseagreen;
        }

        a {
            background-color: lightcoral;
        }
    </style>
</head>

<body>
    <ul id="parent">
        <li>
            <a href="#">链接</a>
        </li>
    </ul>
    <script>
        var parent = document.getElementById('parent');//获取标签
        /*
          let theTarget = event.target
          Event 事件对象提供了 target 属性用于获取触发事件的目标元素(标签)
          event.target 属性在实现事件代理时会被用到
          event.target 属性可以用来实现事件委托 (event delegation)
        */
        bind(parent, 'click', function (event) {
            var e = event || window.event;//这句没必要
            var target = e.target || e.srcElement;//判断兼容性问题
                console.log(target);
            });

        function bind(elem, eventName, functionName) {
            if (elem.addEventListener) {
                elem.addEventListener(eventName, functionName);
            } else {
                elem.attachEvent('on' + eventName, function () {
                    functionName.call(elem);
                });
            }
        }
    </script>
</body>

</html>
ul节点内容

ul节点内容

阻止默认行为

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认行为</title>
    <style>
        a {
            display: inline-block;
            width: 35px;
            height: 25px;
            border: 1px solid lightslategray;
            padding: 10px 20px;
            text-decoration: none;
        }
    </style>
</head>
<body>
<!-- 作用 - 跳转 -->
<a id="aElem" href="#">链接</a>
<script>
    /*
      event.preventDefault();
      event.returnValue = boolean;
      IE 8 及之前版本的浏览器: returnValue 属性
      IE 9 及之后版本和其他浏览器: preventDefault() 方法
     */
    var aElem = document.getElementById('aElem');
     aElem.addEventListener('click',function(event){
        console.log(event.preventDefault());//undefined
    });

    aElem.attachEvent('onclick',function(event){
        console.log(event.returnValue = false);//输出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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>阻止默认行为</title>
    <style>
        a {
            display: inline-block;
            width: 35px;
            height: 25px;
            border: 1px solid lightslategray;
            padding: 10px 20px;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <!-- 作用 - 跳转 -->
    <a id="aElem" href="#">链接</a>
    <script>
          var aElem = document.getElementById('aElem');
          aElem.onclick = function() {
              return 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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>17 获取鼠标按键</title>
    <style>
        body {
            margin: 0px;
            height: 1000px;
        }

        #menu {
            width: 50px;
            height: 100px;
            background-color: lightcoral;
            display: none;
            position: absolute;
            /*left: ;
            top: ;*/
        }
    </style>
</head>

<body>
    <div id="menu"></div>
    <script>
         /*
            事件对象的属性
            * button属性 - 获取鼠标按键
              * 0 - 鼠标左键
              * 2 - 鼠标右键
            * buttons属性 - 获取鼠标按键
              * 1 - 鼠标左键
              * 2 - 鼠标右键
         */
     //注意点:body默认没有高度
      var body = document.body;
      //mousedown鼠标被按下
      body.onmousedown = function(event) {
           console.log(event);
      }

     // 阻止默认的右键菜单oncontextmenu(h5)
        body.oncontextmenu = function(event){
            event.preventDefault();
        }

     // 提供自定义的右键菜单
     body.onmousedown = function (event) {
        var menu = document.getElementById('menu');
            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

鼠标左键

鼠标左键

获取鼠标坐标值

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>获取鼠标坐标值</title>
    <style>
        body {
            margin: 0px;
            height: 1000px;
        }
    </style>
</head>

<body>
    <script>
        /*  当 HTML 页面中标签绑定的事件被触发时,我们还可以通过 Event 事件对象获取鼠标当前的坐标值。
            pageX 和 pageY: 表示鼠标在整个页面中的位置。如果页面过大(存在滚动条),部分页面可能存在可视区域之外。
            clientX 和 clientY: 表示鼠标在整个可视区域中的位置。
            screenX 和 screenY: 表示鼠标在整个屏幕中的位置。从屏幕(不是浏览器)的左上角开始计算。
            offsetX 和 offsetY: 表示鼠标相对于定位父元素的位置。 */

         var body = document.body;
         body.addEventListener('click',function(event){
             console.log(event.pageX,event.clientX,event.screenX,event.offsetX);
         });
    </script>
</body>

</html>

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

发表评论

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