javascript 事件基础

一:事件流

      事件流描述的是从页面中接收事件的顺序。

 事件冒泡

    <div id="one">
        <div id="two">
            <div id="three">点击</div>
        </div>
    </div>
    document.getElementById("one").addEventListener("click", clickOne);    //默认最后一个参数为false,即表示事件冒泡机制
    document.getElementById("two").addEventListener("click", clickTwo);
    document.getElementById("three").addEventListener("click", clickThree);

    function clickOne() {
        console.log("点击的是one");
    }
    function clickTwo() {
        console.log("点击的是two");
    }
    function clickThree() {
        console.log("点击的是three");
    }

 点击id为three的div,会依次打印出结果:点击的是three、点击的是two、点击的是one。

 事件捕获

    document.getElementById("one").addEventListener("click", clickOne, true);    //把最后一个参数改为ture,即实行事件捕获机制
    document.getElementById("two").addEventListener("click", clickTwo, true);
    document.getElementById("three").addEventListener("click", clickThree, true);

    function clickOne() {
        console.log("点击的是one");
    }
    function clickTwo() {
        console.log("点击的是two");
    }
    function clickThree() {
        console.log("点击的是three");
    }

 将点击id为three的div,会依次打印出结果:点击的是one、点击的是two、点击的是three。

二:事件处理机制

1.HTML事件处理程序

    <div id="one">
        <div id="two">
            <div id="three" onclick="clickThree()">点击</div>
        </div>
    </div>

2.DOM0级事件处理程序

    var btn2 = document.getElementById("two");
    btn2.onclick = function () {
        console.log("点击的是two");
    }

3.DOM2级事件处理程序

DOM2级事件定义了2个方法,用于处理指定和删除事件处理程序的操作,addEventListener()和removeEventListener()。

所有DOM节点都包含这两个方法,他们包含三个参数,第一个参数为事件类型;第二个参数为事件函数,第三个参数为布尔值,

如果是true的话,说明是事件流是捕获事件,如果是false的话,那么事件流是冒泡事件;

    document.getElementById("one").addEventListener("click", clickOne);
    document.getElementById("two").addEventListener("click", clickTwo);
    document.getElementById("three").addEventListener("click", clickThree);
  document.getElementById("one").removeEventListener("click",clickOne);  //移除事件

    function clickOne() {
        console.log("点击的是one");
    }
    function clickTwo() {
        console.log("点击的是two");
    }
    function clickThree() {
        console.log("点击的是three");
    }

整体上来说,是哪个先注册,哪个先执行。另外老版本的IE和跨浏览器的问题就不赘述了,都是一些历史过时问题了。

三、事件对象

在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息;包括导致事件的元素,事件的类型以及其他与特定事件相关的信息。

里面有一些重要常用的属性及方法,如:

type属性:用于获取事件类型

target属性:用于获取事件目标

stopPropagation方法:用于阻止事件冒泡

e.preventDefault()方法:阻止事件的默认行为 (如a标签的跳转)

var btn = document.getElementById("btn");
btn.onclick = function(e){
    console.log(e);
}

下面我们来看看最基本的成员的含义吧;如下:

属性/方法

类型

含义

bubbles

Boolean

事件是否冒泡

cancelable

Boolean

是否可以取消事件的默认行为

currentTarget

Boolean

事件处理程序当前正在处理事件的那个元素

defaultPrevented

Boolean

为true 表示已经调用了preventDefault()

detail

Integer

与事件相关的细节信息

eventPhase

Integer

调用事件处理程序的阶段:1表示捕获阶段,2表 示“处于目标”,3表示冒泡阶段

preventDefault()

Function

取消事件的默认行为。如果cancelable是 true,则可以使用这个方法

stopImmediatePropagation()

Function

取消事件的进一步捕获或冒泡,同时阻止任何 事件处理程序被调用

stopPropagation()

Function

取消事件的进一步捕获或冒泡。如果bubbles 为true,则可以使用这个方法

target

Element

事件的目标

type

String

被触发的事件的类型

view

AbstractView

与事件关联的抽象视图。等同于发生事件的 window对象

理解currentTarget与target

在事件处理程序内部,this始终等于currentTarget值,即currentTarget是指当前被触发或者说正在处理事件的那个元素,而target是指当前的目标元素;

比如如下代码,对btn按钮触发点击事件,那么e.currentTraget指向了this,e.target也指向了this;如下代码:

var btn = document.getElementById("btn");
btn.onclick = function(e){
    console.log(e.currentTarget == this); // true
    console.log(e.target == this);  // true
}

但是如果我对document.body触发点击的话,那么e.currentTarget就指向了document.body了,那么e.target 指向与 btn那个元素了,如下代码:

document.body.onclick = function(e){
    console.log(e.currentTarget === document.body); // true
    console.log(document.body === this);  // true
    console.log(e.target === document.getElementById("btn")); //true
};

现在应该能理解currentTarget与target的区别吧!currentTarget就是指被点击的那个元素,但是target是当前点击的目标元素,

如上代码,由于btn上并没有注册事件,结果click事件就冒泡到了document.body,在那里事件才得到了处理。

4.事件类型:

4.1鼠标事件:当用户通过鼠标在页面操作时触发;

  1. click事件:在用户单击鼠标按钮或者按下回车键触发;
  2. dblclick事件:在用户双击鼠标按钮时被触发;
  3. mouseover事件:鼠标指针在元素外部,用户将移入另一个元素的边界时触发,感觉和mouseenter事件类似;
  4. mouseout事件:用户将其移入另一个元素内被触发。
  5. mouseenter事件:在鼠标光标从元素外部移动到元素范围之内被触发;这个事件不冒泡;
  6. mouseleave事件:在鼠标光标从元素内部移动到元素范围之外被触发;这个事件不冒泡;
  7. mousemove事件:当鼠标指针在元素内部移动时重复地触发。
  8. mousedown事件:在用户按下了任意鼠标按钮时被触发,不能通过键盘触发这个事件。
  9. mouseup事件:用户释放鼠标按钮时触发;

页面上所有的元素都支持鼠标事件,除了mouseenter和mouseleave,所有鼠标事件都会冒泡,也可以被取消,而取消鼠标事件将会影响浏览器的默认行为。

4.2焦点事件:当元素获得或失去焦点时触发;

  blur:在元素失去焦点时触发,这个事件不会冒泡,所有浏览器都支持。

       foucs:在元素获得焦点时触发,这个事件不会冒泡,所有浏览器都支持。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落花落雨不落叶

关于Html与css的一些解释

32012
来自专栏Java帮帮-微信公众号-技术文章全总结

02.HTML元素/属性/标题/段落/文本格式化/链接

02.HTML元素/属性/标题/段落 /文本格式化/链接 HTML 元素 ---- HTML 文档由 HTML 元素定义。 ---- HTML 元素 开始标签 ...

5983
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

1. 绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件...

1888
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(四)元素的创建添加与删除,自定义属性

一般 val() 是获取表单的 value 属性; val(值); 设置表单的 value 属性。

1403
来自专栏python3

tkinter -- button1

Tkinter Relief styles: 构件的浮雕式是指某些模拟的3-D周围的部件外的影响

1294
来自专栏沈唁志

jQuery中的9个选择器

1512
来自专栏Java后端技术

细谈CSS布局方式

  [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动、left对象向左浮动,而后面的内容流向对象的右侧、right对象向右浮动,而...

1182
来自专栏小筱月

jQuery 事件绑定 和 JavaScript 原生事件绑定

jQuery 中提供了四种事件监听绑定方式,分别是 bind、live、delegate、on,

2352
来自专栏超然的博客

CSS 居中

给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实...

1131
来自专栏HTML5学堂

关于行、块元素的讲解以及HTML5元素的分类

继上周我们讲解了所有常用的CSS选择器以及CSS选择器的优先级。到目前为止,你是不是觉得静态页面布局简单了很多,而不是单单使用类名选择器(虽然很好用)来操作了。...

4797

扫码关注云+社区

领取腾讯云代金券