DOM编程系列之事件

时间 2019-12-09

标签 dom 编程系列事件栏目 HTML 繁體版

原文原文链接

事件

所谓事件就是是浏览器告知JavaScript程序用户的行为

事件的属性

HTML页面元素提供的事件属性

HTML页面元素提供的事件属性 -> 元素的属性分类之一html
- DOM提供了一系列的事件名称

示例代码:node

<body>
<!--
    HTML页面元素提供的事件属性 -> 元素的属性分类之一
    * DOM提供了一系列的事件名称
 -->
<button onclick="myClick()" id="btn">按钮</button>
<script>
    function myClick(){
        console.log('你终于点中了我...');
    }
</script>
</body>

DOM对象提供的事件属性

DOM对象能够设置事件属性

示例代码:浏览器

<body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    // DOM对象的事件属性
    btn.onclick = myClick;
    function myClick(){
        console.log('你终于点中了我...');
    }
</script>
</body>

事件监听器

DOM对象提供的事件属性 - 没法同时为一个指定元素绑定相同事件屡次
事件监听器也能够设置事件属性
注意: 该方法有浏览器兼容问题

示例代码:函数

<body>
<button id="btn">按钮</button>
<script>
    var btn = document.getElementById('btn');
    // DOM对象提供的事件属性 - 没法同时为一个指定元素绑定相同事件屡次
    /*btn.onclick = function(){
        console.log('xxx');
    }
    btn.onclick = function(){
        console.log('yyy');
    }*/

    /*
        为指定元素添加事件监听器
        addEventListener(eventName, callback)
        * 参数
          * eventName - 表示绑定的事件名称(注意:没有on)
          * callback - 表示事件的处理函数(回调函数)
        * 容许为相同元素绑定相同事件屡次
      */
    /*btn.addEventListener('click',function(){
        console.log('xxxx...');
    });
    btn.addEventListener('click',function(){
        console.log('yyyy...');
    });*/
</script>
</body>

浏览器兼容解决方案

示例代码:code

事件监听器的浏览器兼容问题(IE 8如下版本浏览器不支持)
        attachEvent(eventName,functionName)方法
        * 参数
          * eventName - 表示事件名称(注意:必须有on)
          * functionName - 表示事件的处理函数
     */
    btn.attachEvent('onclick',function(){
        console.log('xxxx...');
    });

    // 提供浏览器兼容解决方案
    function bind(element, eventName, functionName){
        if (element.addEventListener) {
            element.addEventListener(eventName, functionName);
        } else {
            element.attachEvent('on' + eventName, functionName);
        }
    }

移除注册事件

removeEventListener(eventName,functionName)方法htm
- 表示对已经绑定的事件进行移除
- 参数:对象
  - eventName - 表示要移除的事件名称
  - functionName - 表示事件的处理函数事件
    - 必须是注册事件的处理函数(就是必须是同一个函数)

示例代码:ip

<body>
<button id="btn">哒哒哒</button>
<script>
    /* 获取指定ID属性 */
    var btn = document.getElementById('btn');
    /* 添加鼠标点击事件 */
    function myClick() {
        console.log('一花一世界...');
    }
    /* 添加事件监听器 */
    btn.addEventListener('click',myClick);
    btn.addEventListener('click',function () {
        console.log('一笑一人生...');
    });
    /*
        移除注册事件 - removeEventListener(eventName,functionName)方法
          * 参数 :
            * eventName - 表示要移除的事件名称
            * functionName - 表示事件的处理函数
              * 必须是注册事件的处理函数(就是必须是同一个函数)
     */
    btn.removeEventListener('click',myClick);
    /*
</script>
</body>

解决浏览器兼容问题

示例代码:element

IE 8如下的版本浏览器不支持removeEventListener方法()
          * detachEvent(eventName,functionName)
            * eventName - 表示移除的事件名称(必须有on)
            * functionName - 表示事件处理函数
              * 必须是注册事件的处理函数(就是必须是同一个函数)
     */
    function unbind(element,eventName,functionName) {
        if (element.removeEventListener) {
            element.removeEventListener(eventName,functionName);
        }else {
            element.detachEvent('on' + eventName,functionName);
        }
    }

事件对象

Event事件对象 - 做为全部事件对象的父级
- MouseEvent事件对象 - 表示鼠标事件
- KeyboardEvent事件对象 - 表示键盘事件
- TouchEvent事件对象 - 表示触摸事件

示例代码:

<body>
<button id="btn">哒哒哒</button>
<script>
    var btn = document.getElementById('btn');
    // 事件的处理函数中接收一个参数 - 事件对象
    btn.addEventListener('click',function (event) {
        /*
            Event事件对象 - 做为全部事件对象的父级
              * MouseEvent事件对象 - 表示鼠标事件
              * KeyboardEvent事件对象 - 表示键盘事件
              * TouchEvent事件对象 - 表示触摸事件
         */
       console.log(event);
    });
</script>
</body>

解决浏览器兼容问题

示例代码:

// IE 8如下版本浏览器提供的添加事件监听器方法 - 事件对象是做为window对象属性出现
    btn.attachEvent('onclick',function () {
        console.log(window.event);
    });
    function bind(element, eventName, functionName){
        if (element.addEventListener) {
            element.addEventListener(eventName, functionName);
        } else {
            element.attachEvent('on' + eventName, function(){
                functionName.call(element);
            });
        }
    }

    bind(btn,'click',function(event){
        var e = event || window.event;
    });

    /*btn.onclick = function(event){
        console.log(event);
    }*/

    function myClick(event){
        console.log(event);
    }

阻止默认行为

return false; - return语句
- 做用 - 当前函数是事件的处理函数时，阻止默认行为
- 注意 - return语句以后的逻辑代码不会被执行
  - 编写在函数体的最后面
- 只有在DOM对象的事件属性中具备阻止默认行为的功能

示例代码:

<a href="#">连接</a>
<script>
    var aElement = document.getElementsByTagName('a')[0];

    /*aElement.addEventListener('click',function(event){
        event.preventDefault();// 阻止默认行为
    });*/

    aElement.onclick = function(event){
        // event.preventDefault();// 阻止默认行为
        /*
            return false; - return语句
            * 做用 - 当前函数是事件的处理函数时，阻止默认行为
            * 注意 - return语句以后的逻辑代码不会被执行
              * 编写在函数体的最后面
            * 只有在DOM对象的事件属性中具备阻止默认行为的功能
         */
        return false;
    }

    aElement.attachEvent('onclick',function(event){
        var e = event || window.event;
        e.returnValue = false;// 阻止默认行为
    });

</script>
</body>

获取鼠标坐标值

pageX和pageY
- 鼠标坐标值相对于当前HTML页面
clientX和clientY
- 表示获取鼠标在可视窗口中的位置
screenX和screenY
- 表示获取鼠标在显示器屏幕中的位置

示例代码:

<body>
<script>
    var html = document.documentElement;
    html.addEventListener('click',function(event){
        // 鼠标坐标值相对于当前HTML页面
        console.log(event.pageX, event.pageY);
        // 鼠标坐标值相对于当前可视区域
        console.log(event.clientX, event.clientY);
        // 鼠标坐标值相对于当前屏幕的
        console.log(event.screenX, event.screenY);
        // 鼠标坐标值只能获取，不能设置
    });

</script>
</body>

获取相对于定位父元素的鼠标坐标值

offsetX和offsetY
- 表示获取鼠标相对于在父元素中的位置

示例代码:

<style>
        #d1 {
            width: 400px;
            height: 400px;
            border: 1px solid black;

            margin-top: 300px;
            margin-left: 300px;
        }

    </style>
</head>
<body>
<div id="d1"></div>
<script>
    // 相对于指定元素的鼠标坐标值
    var div = document.getElementById('d1');
    div.addEventListener('click',function(event){
        console.log(event.offsetX, event.offsetY);
    });

</script>
</body>

事件委托

就是为全部相同父级的子级元素绑定事件

示例代码:

<body>
<div id="container">
    <button id="btn1">按钮</button>
    <button id="btn2">按钮</button>
    <button id="btn3">按钮</button>
</div>
<script>
    /*var btn1 = document.getElementById('btn1');
    btn1.addEventListener('click',function(){
        console.log('这是一个按钮');
    });
    var btn2 = document.getElementById('btn2');
    btn2.addEventListener('click',function(){
        console.log('这是一个按钮');
    });
    var btn3 = document.getElementById('btn3');
    btn3.addEventListener('click',function(){
        console.log('这是一个按钮');
    });*/

    // 不将事件绑定给指定元素，而是绑定给共同的父级/祖先元素
    var container = document.getElementById('container');
    container.addEventListener('click',function(event){
        var target = event.target;// 触发事件的目标元素
        if (target.nodeName === 'BUTTON') {
            console.log('这是一个按钮');
        }
    });
</script>
</body>