Javascript事件流

事件流

1
2
3
4
5
6
7
当触发某个事件时(某个事件发生了),从子元素向父级元素触发 或 从父级元素向子元素触发的过程 ,这个过程 称为事件流

事件流有两种模式:

事件冒泡:从子元素向父级元素触发 small --- big ---body --- document -- window

事件捕获:从父级元素向子元素触发 window --- document --- body --- big --- small


事件冒泡

当子元素触发某个事件时,同样的事件回向父级元素触发,这个过程称之为事件冒泡

阻止事件冒泡

兼容写法:
e.stopPropagation?e.stopPropagation():e.cancelBubble=true;

事件绑定

事件绑定: 如何为元素添加一个事件

1
2
3
4
5
1、在标签上写事件名称 <input onclick = "fun()">

2、通过 对象.事件 = function(){ .... } ,写在 script 标签内部的

3、同过 addEventListener() 方法

事件监听

通过 addEventListener 方法为元素添加事件 称为事件的监听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
事件监听好处:

可以为同一个元素添加多个同样事件

为同一个元素添加多个同样事件时,执行顺序从上到下顺序执行。

事件监听用法:

对象.addEventListener("事件",function(){},true/false) --- 高版本浏览器

说明:

第一个参数: 监听的事件 这里的事件没有on

第二个参数: 事件处理程序

第三个参数: 是一个布尔值 true表示 事件的捕获 false 表示事件的冒泡 (默认是false)

对象.attachEvent("事件",事件处理程序) ---- 低版本浏览器

说明:

第一个参数: 监听的事件 这里的事件有on

第二个参数: 事件处理程序

冒泡和捕获的执行顺序

当同一个元素既有事件冒泡和事件捕获时,先执行捕获 ; 后执行冒泡

事件委托

委托:让别人去做

事件委托:把某个事件委托给别人去做

委托的好处:

当某些元素具有同样的事件时,为了提高程序的执行效率,可以把这些元素的事件加到他们的父级元素上。

委托实现方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
1、 父级元素.事件 = function(){ ... }

2、 通过事件监听方法 addEventListener 实现

父级元素.addEventListener("事件",function(){ .... })

委托实现时,获取事件源的属性: e.target || e.srcElement

委托实现原理: 利用事件冒泡的机制,将某些元素的事件添加到父级元素上

委托对事件的限制: 不是所有的事件都可以实现委托,例如下面的事件一般不需要委托 (onclick一般用委托实现的比较多)

onload onfocus onblur ....

注意的问题

1
2
3
4
5
6
7
8
9
button 标签 在 form 中相当于 submit 按钮,会刷新页面

<a href ="#">超链接</a>

阻止超链接的跳转功能

<a href ="javascript:;">超链接</a>

<a href ="javascript:void(0);">超链接</a>

json 对象

json 全称:javascript object notation

中文含义: javascript 对象表示法

定义:json 是一种轻量级的数据交换对象

作用: 存储数据

json 对象定义:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var j = { }

{} 里面数据的组成格式: 键值对 , 键和值之间用冒号,每一个键值对之间用 逗号 间隔, 所有的键必须用 双引号引起来。

键对应的值 可以是任意类型

例如:

var j = { "name": "小明" , "age":18 , "tel":"13999999999" }

json 对象的操作:

赋值:

定义时直接赋值

动态为 json 对象赋值 j.addr = "beijing";

取值:

json 对象.键名

json 对象["键名"]

json 对象的遍历 : for...in

offset 家族

获取元素的宽和高:

offsetWidth / offsetHeight 获取的宽度为:内容宽度 + 补白 + 边框

clientWidth / clientHeight 获取的宽度为:内容宽度 + 补白

对象.style.width 和 offsetWidth 区别:

1、前者获取的宽度 为内容的的宽度(不包括补白和边框) , 后者获取的宽度为 内容宽度 + 补白 + 边框

2、前者获取的结果类型 为 string 后者获取的类型为 number ,可以直接操作

3、前者可读可写 后者只可读不可写(只能获取结果不能设置结果)

4、前者只能获取行内样式值(带有 px 值) 后者可以获取行内值也可以获取内嵌样式值

获取元素偏移量:

offsetLeft : 获取距离上一级中(离他最近)具有定位的元素的左偏移,这里的上一级可能是父元素,也可能是上上一级爷爷元素,也可能是曾爷爷….

offsetTop : 获取上偏移(含义同上) 如果上一级中所有元素都没有定位,默认相对 body 的左偏移

Js 实现拖拽效果

1、要想实现拖拽效果,首先要有鼠标按下事件

鼠标按下时,需要记录 鼠标按下时相对于移动盒子的偏移量

rex = e.offsetX || e.layerX

rey = e.offsetY || e.layerY

2、鼠标拖拽盒子在文档上移动,需要给文档添加一个 鼠标移动事件

document.onmousemove = function(){….}

3、如果要停止拖拽,鼠标抬起时需要取消文档的移动事件

document.onmouseup = function(){

//取消文档的移动事件

document.onmouesmove = null;

}

代码实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
box.onmousedown = function() {
rex = e.offsetX;

rey = e.offsetY;

document.onmousemove = function() {
box.style.left = e.pageX - rex;

box.style.top = e.pageY - rey;
};
};

document.onmouseup = function() {
document.onmouesmove = null;
};

获取窗口的宽度和高度:

window.innerWidth / window.innerHeight

window.outerWidth / window.outerHeight(包含浏览器的工具条高度)

取消拖拽时文字的选中状态

1
2
3
window.getSelection
? window.getSelection().removeAllRanges()
: document.selection.empty();

本文标题:Javascript事件流

文章作者:Jonathon

发布时间:2019年01月31日 - 13:01

最后更新:2019年01月31日 - 14:01

原始链接:https://www.jonathon.cn/js4.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

苟富贵,勿相忘!