DOM事件、事件冒泡、捕获、代理

课程目标

  • 会用原生js控制事件实现各种操作
  • 了解事件内部机制、事件冒泡、事件捕获
  • 理解阻止默认事件,停止冒泡

课程内容

1. 什么是事件

  • 事件是某个行为或者触发,比如点击、鼠标移动
  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当用户触发按键时...

2. 常用的事件

onclick: 当点击时操作
    document.getElementById("bnt1").onclick=function(){
        document.getElementById("p1").innerHTML= new Date();
    };
onchange:当对象发生变化时

onchange 属性可以使用于: <input>, <select>, 和 <textarea>

        document.getElementById("input1").onchange = function(){
            this.value=this.value.toUpperCase();
        }
onmouseoveronmouseleave:当鼠标移入和移除节点时操作
        var myname = document.getElementById("name");
            myname.onmouseover = function(e){
            //console.log(e);
            this.style.color = "red";
        }

onmousemove 事件在鼠标移动到 div 元素上时触发。

mouseenter 事件中有在鼠标指针进入 div 元素时触发。

onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)。

'onmousedownonmouseup`:鼠标点下不松手时是mousedown,松开手后是mouseup。点击是按下和松开的两个过程之和,mousedown+mouseup=click
    document.getElementById('div2').onmousedown=function(){
        this.innerHTML="鼠标按下了";
    };
    document.getElementById('div2').onmouseup=function(){
        this.innerHTML="鼠标松开了";
    }
resize:当窗口大小变化时
window.onresize=function(){
        document.getElementById('p4').innerHTML='width:'+window.screen.width+",height:"+width.screen.height;
    }

更多事件可参考这里

3. this的简单使用

在匿名函数内,this代表绑定事件的元素(自己)

        document.getElementById("btn1").onclick=function(){
            this.style.backgroundColor = "red";
        } 

4. 查看事件对象

  • 事件也是个对象,被做为函数的参数传进去

    document.getElementById("btn5").onclick=function(e){
        console.log(e);          // 事件对象
        console.log(e.target);   //发出事件的元素
        console.log(e.x);        //事件的位置
        console.log(e.type);     //事件的类型
    }
    

5. 事件绑定和解除绑定

addEventListener 和 removeEventLister

注意:早期的ie使用element.attachEvent(event, function)和element.detachEvent(event, function);

addEventListener() 方法用于向指定元素添加事件处理函数。addEventListener() 方法添加的事件处理函数不会覆盖已存在的事件处理函数。你可以向一个元素添加多个事件处理函数。比如对一个元素添加两个 "click" 事件。removeEventListener() 方法来移除事件的监听。

document.getElementById("myBtn").addEventListener(事件, 回调函数);

6. 事件冒泡和捕获

事件传递有两种方式:冒泡与捕获。

在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素

在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件

事件冒泡:

    document.getElementById('div6').onclick=function(){
        alert('div6 click');
    }
    document.getElementById('btn6').onclick=function(){
        alert('btn6 click');
    }

addEventListener(event, function, useCapture); useCapture默认值为 false, 是冒泡传递。当useCapture值为 true 时, 事件使用捕获传递。

事件捕获:

    document.getElementById('div7').addEventListener('click', function(){
        alert('div7 click');
    }, true);
    document.getElementById('btn7').addEventListener('click', function(){
        alert('btn7 click');
    }, true);

7. 冒泡阻止和取消默认事件

冒泡阻止:e.stopPropagation()

该方法阻止事件冒泡,父元素监听不再监听到事件。

    document.getElementById('div8').onclick=function(){
        alert('div8 click'); //事件被阻断了,不再响应
    }
    document.getElementById('btn8').onclick=function(evt){
        evt.stopPropagation();
        alert('btn8 click');
    }

取消默认事件: e.preventDefault();

该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).

<a id="link" href="http://www.baidu.com">百度</a>
<script type="text/javascript">
    document.getElementById('link').onclick=function(e){
        e.preventDefault();
    }

</script>