js事件

1. 事件流

描述的是从页面接收到事件的顺序,分为

  • 事件冒泡


    js事件_第1张图片
  • 事件捕获


    js事件_第2张图片

2.DOM事件流

包括三个阶段:事件捕获阶段(截获事件),处于目标阶段(实际的目标接收到事件),事件冒泡阶段(对事件作出响应)。

js事件_第3张图片

在事件捕获阶段不会接收到事件,直接进行下一阶段。

3.事件处理程序

响应 事件(用户或者浏览器的动作)的函数

  • HTML事件处理程序


       
click me

html和javascript代码紧密耦合,修改起来不是很方便,要同时修改html和js代码

下面是使用javascript指定事件处理程序:

  • DOM0级事件处理程序

    
click me
  • DOM2级事件处理程序
    定义了addEventListener(),removeEventListener(),包含三个参数 绑定的事件,触发事件要执行的函数,布尔值(true表示事件捕获,false表示事件冒泡),默认为false。

    
click me
  • IE事件处理程序
    实现了与DOM中类似的方法,attachEvent(),detachEvent(),接收两个参数,事件处理名称和事件处理函数。

    
click me
  • 跨浏览器的事件处理程序
    要保证处理事件能够在大多数的浏览器下一致的运行,可以用以下的方式
    1. 首先创建一个addHandler(),负责判断使用DOM0级,DOM2级还是IE方法来添加事件。由三个参数:要操作的元素,事件名称,事件处理函数。
    2. 创建一个removeHandler(),移除事件处理程序。同样接收三个参数。
var EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler;
            }
        },
        removeHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = null;
            }
        }
    }

4.事件对象

在触发DOM事件的时候,会产生一个事件对象event,包含着和事件相关的信息。
this,event.currentTarget,event.target之间的关系:

    var myDiv = document.getElementById("div")
    myDiv.addEventListener("click", function (event) {
        console.log(event);
        console.log(this);
        console.log(event.target);
        console.log(event.currentTarget);
    }, false);
    
    document.body.addEventListener("click", function (event) {
        console.log(event);
        console.log(this);
        console.log(event.target);
        console.log(event.currentTarget);
    }, false);
js事件_第4张图片

上面的结果可以看到 this和event.currentTarget 的值是一样的,而target是真正触发的元素。

5.如何阻止事件默认的行为

preventDefault()用于阻止事件默认的行为,比如阻止链接跳转,阻止submit提交等等。


  link

    var myDiv = document.getElementById("link")
    myDiv.addEventListener("click", function (event) {
        event.preventDefault();
    }, false);

6.停止事件在DOM中的传播

stopPropagation()用于停止事件在DOM中的传播

var myDiv = document.getElementById("div")
    myDiv.addEventListener("click", function (event) {
        console.log("click div")
        event.stopPropagation();
    }, false);
    document.body.addEventListener("click", function (event) {
       console.log("click body")
    }, false);

结果只输出了:click div
事件没有被document.body接收到。

你可能感兴趣的:(js事件)