event事件，document事件、滚动事件介绍

event事件，document事件、滚动事件介绍

event事件对象

1事件对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

    • 什么时候会产生Event 对象呢?

      • 例如: 当用户单击某个元素的时候,我们给这个元素注册的事件就会触发,该事件的本质就是一个函数,而该函数的形参接收一个event对象.

    • 事件通常与函数结合使用，函数不会在事件发生前被执行！

使用场景即：

var oDIv = document.getElementById('box');
​
oDiv.onclick = function(event){
.........
}

2.事件流

2.1事件流发展史

见：http://www.cnblogs.com/rubylouvre/archive/2010/04/27/1721988.html

2.2冒泡（由下到上）

意思就是说,假如用户单击了一个元素,该元素拥有一个click事件,那么同样的事件也将会被它的祖先触发,这个事件从该元素开始一直冒泡到DOM树的最上层,这一过程称为事件冒泡

image
image

2.3捕获（由上到下）

事件捕获和事件冒泡是相反的,也就是说,当用户触发了一个事件的时候,这个事件是从DOM树的最上层开始触发一直到捕获到事件源.

2.4事件流的写法以及实现方式

    • 标准实现方式使用关键词

      addEventListener

      ,假如你想要给某一个元素添加事件,现在就可以这样写

      element.addEventListener(eventType, fn, false)

      • dom对象.addEventListener(事件类型, 回调函数, 事件机制)这里的事件类型表示你要使用哪种事件类型比如click, 回调函数里面写着触发此事件你要做什么事情, 事件机制分为冒泡和捕获,如果为false表示事件冒泡,为true表示事件捕获

    • IE写法：

    • dom对象.attachEvent(eventType, fn)第一个参数表示事件类型,第二个是回调.这种写法兼容IE, IE没有实现事件捕获,

3.关于event对象

  • 在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们需要的一些参数,比如说我们需要知道此事件作用到谁身上了,就可以通过event的属性target来获取到(IE暂且不谈),或者想阻止浏览器的默认行为可以通过方法preventDefault()来进行阻止.以下是event对象的一些属性和方法
属性 描述
altKey 返回当事件被触发时，”ALT” 是否被按下。
button 返回当事件被触发时，哪个鼠标按钮被点击。
clientX 返回当事件被触发时，鼠标指针的水平坐标。
clientY 返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时，”CTRL” 键是否被按下。
metaKey 返回当事件被触发时，”meta” 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey 返回当事件被触发时，”SHIFT” 键是否被按下。
  • IE 属性(除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性)
属性 描述
cancelBubble 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement 对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode 对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup
offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为
srcElement 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。
  • 标准 Event 属性 下面列出了 2 级 DOM 事件标准定义的属性
属性和方法 描述
bubbles 返回布尔值，指示事件是否是起泡事件类型。
cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
target 返回触发此事件的元素（事件的目标节点）。
timeStamp 返回事件生成的日期和时间。
type 返回当前 Event 对象表示的事件的名称。
initEvent() 初始化新创建的 Event 对象的属性。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation() 不再派发事件。

4.Event对象的一些兼容写法

[
image

](javascript:void(0);)

获得event对象兼容性写法
event || (event = window.event);
获得target兼容型写法
event.target||event.srcElement
阻止浏览器默认行为兼容性写法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
阻止冒泡写法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);

[
image

](javascript:void(0);)

事件绑定和取消事件绑定方法的形式

[
image

](javascript:void(0);)

//事件绑定function on(dom, eventType, fn) {
if(dom.addEventListener) {
dom.addEventListener(eventType, fn);
} else {
if(dom.attachEvent) {
dom.attachEvent('on' + eventType, fn);
}
}
//取消事件绑定
function un(dom, eventType, fn) {
if(dom.removeEventListener) {
dom.removeEventListener(eventType, fn, false);
} else {
if(dom.detachEvent) {
dom.detachEvent("on" + eventType, fn)
}
}

}

[
image

](javascript:void(0);)

5.事件冒泡和事件捕获demo

[
image

](javascript:void(0);)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bubble event</title>
<style type="text/css">
body{margin:0;}

one{

width:500px;
height:500px;
background:rgb(255,0,0);
border: 1px solid transparent;
}

two{

width:400px;
height:400px;
margin: 0 auto;
margin-top: 50px;
background:rgb(255,50,50);
border: 1px solid transparent;
}

three{

width:300px;
height:300px;
margin: 0 auto;
margin-top: 50px;
background:rgb(255,100,100);
border: 1px solid transparent;
}

four{

width:200px;
height:200px;
margin: 0 auto;
margin-top: 50px;
background:rgb(255,150,150);
}
</style>
</head>
<body>
<div id='one'>
<div id='two'>
<div id='three'>
<div id='four'>
</div>
</div>
</div>
</div>
​
<script>
var one = document.getElementById('one');
var two = document.getElementById('two');
var three = document.getElementById('three');
var four = document.getElementById('four');
​
var useCapture = false; //false为冒泡获取【目标元素先触发】 true为捕获获取【父级元素先触发】
one.addEventListener('click', function(event) {
event || (event = window.event);
console.log(event);
console.log('one');
}, useCapture);
two.addEventListener('click', function() {
console.log('two');
}, useCapture);
three.addEventListener('click', function() {
console.log('three');
}, useCapture);
four.addEventListener('click', function() {
console.log('four');
}, useCapture);
​
/*
false
冒泡
点击four div
输出结果：four three two one
​
true
捕获
点击four div
输出结果： one two three four
*/
</script>
</body>
</html>

[
image

](javascript:void(0);)

Document 文档的属性方法

document节点是文档的根节点，每张网页都有自己的document节点。 属性： 1：document.doctype----它是一个对象，包含了当前文档类型 （Document Type Declaration，简写DTD）信息。

2：document.documentElement----返回当前文档的根节点，对于HTML网页，该属性返回<html>节点。

3：document.defaultView---在浏览器中返回window对象

4：document.head-----返回当前文档的<head>节点

5：document.body-----属性返回当前文档的<body>

6：document.activeElement----返回当前文档中获得焦点的那个元素

7：document.documentURI---返回一个字符串，表示当前文档的网址。所有文档都具备的

8：document.URL---返回一个字符串，表示当前文档的网址。HTML文档独有的。

9：document.domain----返回当前文档的域名。

10：document.lastModified----返回当前文档最后修改的时间戳，格式为字符串。

11：document.title----返回当前文档的标题，该属性是可写的。

12：document.characterSet---返回渲染当前文档的字符集，

13：document.referrer-----返回一个字符串，表示当前文档的访问来源，

14：document.cookie----操作浏览器Cookie

15：document.readyState----返回当前文档的状态，共有三种可能的值。

loading：加载HTML代码阶段（尚未完成解析）

interactive：加载外部资源阶段时

complete：加载完成时

16：document.designMode----控制当前文档是否可编辑

17：document.compatMode----返回浏览器处理文档的模式，

可能的值为BackCompat（向后兼容模式）和CSS1Compat（严格模式）。

18：document.implementation---返回一个对象，用来甄别当前环境部署了哪些DOM相关接口。

19：document.location----返回location对象，提供了当前文档的URL信息。

document.location属性与window.location属性等价。

20：document.scripts----返回当前文档的所有脚本

21：document.styleSheets---返回一个类似数组的对象，代表当前网页的所有样式表。

22：document.links---返回当前文档所有设定了href属性的a及area元素。

23：document.forms---返回页面中所有表单元素form。

24：document.images---返回页面所有图片元素

25：document.embeds---返回网页中所有嵌入对象

方法：

1：document.write()---用于向当前文档写入内容。只要当前文档还没有用close方法关闭，它所写入的内容就会追加在已有内容的后面。

2：document.writeln()----与write方法完全一致，除了会在输出内容的尾部添加换行符。

注意，document.write会当作HTML代码解析，不会转义。

除了某些特殊情况，应该尽量避免使用document.write这个方法。

3：document.getElementsByTagName()----返回值是一个类似数组的HTMLCollection对象。返回所有指定HTML标签的元素，元素的变化实时反映在返回结果中。

4：document.getElementsByClassName()----返回值是一个类似数组的HTMLCollection对象。返回包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。

5：document.getElementsByName()---返回一个类似数组的的对象（NodeList对象的实例） 用于选择拥有name属性的HTML元素

6：getElementById()--------返回匹配指定id属性的元素节点。

这个方法只能在document对象上使用，不能在其他元素节点上使用。

7：document.querySelector()---接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

8：document.querySelectorAll()---返回一个NodeList对象，包含所有匹配给定选择器的节点。 不会实时反映元素节点的变化。但是，7和8都无法选中伪元素和伪类。

9：document.createElement()---生成HTML元素节点

10：document.createTextNode()---用来生成文本节点，参数为所要生成的文本节点的内容。 createTextNode方法对大于号和小于号进行转义，不对单引号和双引号转义

11：document.createAttribute()---生成一个新的属性对象节点，并返回它。参数是属性的名称。

12：document.createDocumentFragment()---生成一个DocumentFragment对象。 DocumentFragment对象是一个存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。

13：document.createEvent()---生成一个事件对象，参数是事件类型

14：document.addEventListener()----添加事件监听函数

15：document.removeEventListener()----移除事件监听函数

16：document.dispatchEvent()----触发事件

17：document.hasFocus()---返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。

18：document.createNodeIterator()-----返回一个DOM的子节点遍历器。遍历子节点。第一个参数为遍历器的根节点，第二个参数为所要遍历的节点类型--文本节点（NodeFilter.SHOW_TEXT）， 元素节点-NodeFilter.SHOW_ELEMENT， 所有节点-NodeFilter.SHOW_ALL nextNode方法先返回遍历器的内部指针所在的节点，然后会将指针移向下一个节点。所有成员遍历完成后，返回null。previousNode方法则是先将指针移向上一个节点，然后返回该节点。

19：document.createTreeWalker()----返回一个DOM的子树遍历器。它遍历整个子树。第一个参数，是所要遍历的根节点，第二个参数指定所要遍历的节点类型。

20：document.adoptNode()-----将某个节点，从其原来所在的文档移除，插入当前文档，并返回插入后的新节点。

21：document.importNode()----从外部文档拷贝指定节点，插入当前文档。 它的第一个参数是外部节点，第二个参数是一个布尔值，

表示对外部节点是深拷贝还是浅拷贝，默认是浅拷贝（false）

22：document.getSelection()-----这个方法指向window.getSelection()

23：document.open()---用于新建一个文档，供write方法写入内容。

24：document.close()---用于关闭open方法所新建的文档。一旦关闭，write方法就无法写入内容了。

滚动事件方法

onscroll

解释：当元素的滚动条滚动时触发的事件。

onscroll事件貌似任何实体元素都可以绑定，这里的实体元素包括DOM元素、window元素、document元素。

用法即：element.onscroll=function(){};

需要注意的是，滚动条一定要出现，而且滚动条是属于这元素的，例如：

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n229" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; background: rgb(51, 51, 51); font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><div id="wrap" style="height:100px;overflow:auto;">
<div id="inner" style="height:200px;">content</div>
</div></pre>

因为外层wrap的高度小于内层inner的高度，所以当设置overflow:auto时会出现滚动条，当拖动滚动条时就会触发wrap的onscroll事件，而不是inner的onscroll事件，即这滚动条属于wrap而不是属于inner，明白这点十分重要，对下面理解的scrollTop、scrollHeight一样道理。

scrollTop

解释：元素滚动条内的顶部隐藏部分的高度。

scrollTop属性只有DOM元素才有，window/document没有。

用法1：获取值 var top = element.scrollTop;//返回数字，单位像素

用法2：设置值 element.scrollTop = 200;

对上面的例子来说，控制滚动条的位置是wrap.scrollTop=xx;而不是inner.scrollTop，道理同上。

兼容性问题：获得整个文档scrollTop，IE是document.documentElement.scrollTop，FF/CH则是document.body.scrollTop.

scrollHeight

解释：元素滚动条内的内容高度。

scrollHeight同scrollTop属性一样，只有DOM元素才有，window/document没有。

不同的是scrollHeight是只读，不可设置。

兼容性问题：获取整个文档scrollHeight，IE/FF/CH都可以通过document.documentElement.scrollHeight或document.body.scrollHeight获得。

此外还有scrollLeft，scrollWidth，道理是一样的。

关于window.scroll()，window.scrollBy()，window.scrollTo()

这3个是全局函数，最新的IE/FF/CH都支持。

window.scroll(x,y)是让window滚动条滚动到那个x,y坐标。//x是水平坐标，y是垂直坐标。

window.scrollBy(-x,-y)是让window滚动条相对滚动到某个坐标，- 10即相对向左/向上滚动10像素。

window.scrollTo(x,y)和window.scroll(x,y)一样。

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 201,049评论 5赞 473
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,478评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 148,109评论 0赞 333
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,097评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,115评论 5赞 363
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,280评论 1赞 279
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,748评论 3赞 393
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,398评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,553评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,440评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,487评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,176评论 3赞 317
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,750评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,821评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,049评论 1赞 257
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,559评论 2赞 348
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,150评论 2赞 341