JavaScript DOM事件进阶及相关练习

来源:csdn博客 分类: 文章浏览史 发布时间:2021-07-29 22:46:27 最后更新:2021-07-29 浏览:347
转载声明：
本文为摘录自“csdn博客”，版权归原作者所有。
原文链接:
https://blog.csdn.net/m0_56649557/article/details/11911...
温馨提示：
为了更好的体验，请点击原文链接进行浏览
摘录时间：
2021-07-29 22:46:27

事件

事件：事件是指可以被JavaScript侦测到的行为，是一种“触发-响应”的机制。这些行为指的就是页面的加载、鼠标单击页面、键盘输入等具体的动作，是实现页面交互的方式。
事件的三要素

  • 事件源：触发事件的元素 (谁触发了事件)
  • 事件类型：如click单击事件 (触发了什么事件)
  • 事件处理程序: 事件被触发后所执行的代码(函数形式)，也称为事件处理函数
<body>
    <button type="button" id="btn">单击事件</button>
    <button type="button" id="btn">单击</button>
    <script>
        //获取按钮的对象
         var btn = document.getElementById('btn');// 事件源
        //给按钮对象绑定事件
         btn.onclick = function(){// 事件类型为click
           	alert('单击了按钮');// 事件处理程序
         }
    </script>
</body>

事件注册

事件注册又称为事件的绑定，

传统方式

                   DOM对象.事件名 = 事件处理程序
                    btn.onclick = function(){ 
                    	 事件处理程序
                    }

缺点：同一个对象的同一个事件只能注册一个事件处理程序，后面注册的程序会将前面注册的程序覆盖掉(唯一性)

事件监听方式

同一个对象的同一个事件可以添加多个事件处理程序

早期浏览器

            DOM对象.attachEvent(type,callback)
            //type参数：表示事件的类型 如click、change、focus等
            //callback参数：是回调函数 表示事件处理程序

标准浏览器

            DOM对象.addEventListener(type,callback,[capture])
            //type参数：表示事件的类型 如click、change、focus等
            //callback参数：是回调函数 表示事件处理程序
            //capture参数：可选参数,用来指定事件处理的方式：true表示事件在捕获阶段处理 如果是false表示事件冒泡阶段处理 默认为false

删除事件

            DOM对象.事件名 = null
            DOM对象.detachEvent(type,callback)  //早期版本浏览器的删除
            DOM对象.removeEventListener(type,callback) // 标准浏览器的删除

事件对象

事件对象：当事件被触发后由系统自动生成，它是与事件有关的数据信息的集合，在标准浏览器中会将一个event对象直接传入到事件处理程序中，而早期版本的IE浏览器（IE 6~IE 8）中，仅能通过window.event才能获取事件对象。

事件对象常用的属性和方法
在这里插入图片描述

    <button>事件对象</button>
    <script>
        var btn = document.querySelector('button')
        btn.onclick = function(e){
            console.log(e.target)// 事件的触发对象
            console.log(e.type)// 事件的类型            
            console.log(this)// 事件绑定的对象
        }        
    </script>

事件阻止

事件阻止 可以通过事件对象的preventDefault()方法和returnValue属性进行事件阻止
注意： 只有当cancelable为true才可以调用preventDefault()方法

阻止超链接跳转

<body>
    <a href="http://www.baidu.com">百度</a>
    <script>
        // 获取超链接
        var a = document.querySelector('a');
        // 注册click事件 阻止a标签的默认事件 标准浏览器的写法
        a.addEventListener('click',function(e){// e在这里代表鼠标mouseEvent 谁click e就是谁
             e.preventDefault();
        })
        // 早期浏览器的写法 推荐
        a.onclick = function(e){
            e.preventDefault();
            e.returnValue;
        }
    </script>
</body>

事件委托

事件委托：将事件统一绑定给共同的祖先元素，这样当后代元素上的事件触发时，会一直触发到祖先元素从而通过祖先元素的响应函数来处理事件。
优点： 只操作一次DOM，可以提高程序的性能。

事件委托主要原理是事件冒泡

利用事件委托增删链接

    <button id="btn">添加链接</button>
    <button id="btn2">删除链接</button>
    <ul id="ul">
        <li><a href="javascript:;" class="n">超链接1</a></li>
        <li><a href="javascript:;" class="n">超链接2</a></li>
        <li><a href="javascript:;" class="n">超链接3</a></li>
    </ul>
    <script>
        window.onload = function () {
            var ul = document.querySelector('#ul')
            var btn = document.querySelector('#btn')
            var btn2 = document.querySelector('#btn2')
            btn.onclick = function () {
                var li = document.createElement('li')
                li.innerHTML = "<a href='javascript:;'>超链接</a>"
                ul.appendChild(li)
            }
            btn2.onclick = function () {
            var a = document.querySelectorAll('a')
            ul.removeChild(ul.children[0])
            ul.onclick = function (e) {
            var a = document.querySelectorAll('a')
            // 如果触发事件对象是我们期望的元素 则执行否则不执行
            // target 表示触发事件的对象 this表示事件绑定对象ul
            for (var i = 0; i < a.length; i++) {
                if (e.target == a[i]) {
                    alert('我是ul的单机响应函数')
                 }
              }
            }
        }
    </script>

鼠标事件

在这里插入图片描述

鼠标事件对象

鼠标事件对象常用位置属性

                clientX:浏览器可视窗口区域的x坐标
                clientY:浏览器可视窗口区域的Y坐标
                pageX:文档中x坐标
                pageY:文档中y坐标
                screenX:屏幕中的x坐标
                screenY:屏幕中的y坐标

CAD坐标练习

    <style>
        div{
            position: absolute;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var sp = document.querySelector('div')
        document.addEventListener('mousemove',function(e){
            var x = e.pageX
            var y = e.pageY
            sp.style.left = x+'px'
            sp.style.top = y+'px'
            sp.innerHTML = '(x:'+x+',y:'+y+')'
        })
    </script>
</body>

在这里插入图片描述

键盘事件

用户在使用键盘时触发的事件
在这里插入图片描述

键盘事件对象（KeyBoardEvent ）其属性keyCode返回的是按键的ASCII码值，通过ASCII码值可以判断出用户按了哪个键

输出用户键盘按下的键

<body>
    搜索：<input type="text">
    <script>
        var search = document.querySelector('input')
        document.addEventListener('keyup',function(e){
            alert('你按了'+String.fromCharCode(e.keyCode))
        })
    </script>
</body>

在这里插入图片描述

提交评论
php技术微信