dom&事件流复习回顾

1.事件流,

三个阶段 捕获,事件目标,冒泡

2.事件三个的绑定方式

a.标签属性绑定,按钮b.on+type 绑定 c.ele.addEventListener("click", fn, false)    IE8 ele.attachEvent("onclick", fn) fn 内的this指向window

3.事件解除绑定

a/b.  ele.onclick = nullc. ele.removeEventListener("click", fn, true) 跟绑定时候的参数完全一致,fn必须是同一个

4.阻止默认事件

a.标签属性绑定b.on这种方式绑定  return false,放置到函数末尾c.ele.addEventListener(type, fn, boolean) e.preventDefault()IE8 ele.attachEvent("onclick", fn) e.returnValue = false

5.阻止冒泡/阻止事件传播

a.标签属性绑定b.on这种方式绑定 e.cancelBubble = true;c. ele.addEventListener(type, fn, boolean)e.stopPropagation()冒泡:a.弹窗,点击蒙层消失  b.事件委托/代理

6. 事件对象e,

包含当前事件的信息,状态e || window.event e.type 事件类型e.target || e.srcElment 事件目标e.keyCode 键盘事件中按键的键值e.clientX/e.clientY 鼠标事件中,鼠标的视口坐标e.cancelBubble = true 取消冒泡e.stopPropagation()e.preventDefault()e.shiftKey  组合键 按下为truee.ctrlKeye.altKeyDOM document object model 

文档对象模型

1. 获取元素的方式

document.getElementById()

document.getElementsByTagName()

document.getElementsByName()

document.getElementsByClassName()

document.querySelector("div") 获取单个,找到第一个匹配的就返回,停止查找

document.querySelectorAll("#box .list")

2. 创建元素节点

var div = document.createElement("div") div.innerHTML = "链接"

3. 插入节点到文档

parentNode.appendChild(childNode) 添加到末尾parentNode.insertBefore(newNode, postionNode) 添加到那个元素前面

4. 元素属性操作

ele.getAttribute("class")ele.setAttribute("class", "active")ele.removeAttribute("class")

5. 复制/替换元素

ele.cloneNode(bol)parentNode.replaceChild(newChild, oldChild)

6. 删除元素

parentNode.removeChild(ele)ele.parentNode.removeChild(ele)ele.remove()案例:sina微博

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,287评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,346评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,277评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,132评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,147评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,106评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,019评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,862评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,301评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,521评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,682评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,405评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,996评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,651评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,803评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,674评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,563评论 2 352

推荐阅读更多精彩内容

  • 什么是事件: 我们可以简单的把事件理解为浏览器的感知系统。比如说:他可以感觉到用户是否点击(click)了页面、鼠...
    张松1366阅读 6,790评论 1 6
  • DOM DOM内容主要分为四部分: 什么是DOM和节点; 获取节点; 节点操作(3种); 属性操作(3种)。 什么...
    magic_pill阅读 774评论 0 1
  • javascript 是一门弱类型,动态脚本语言(所有变量通过var声明,不需要用int char....).它的...
    3hours阅读 711评论 0 1
  • “这是最好时代,也是最有希望的时代。而我们和你们,将在这个时代中缔造一个全新的时代。就在这里,在这款游戏之中!” ...
    战斗者run阅读 489评论 10 5
  • 写在前面:要成长为一个小小男子汉,可不是那么容易的事情。那么,就从打疫苗开始吧:) 第一次陪小猴打疫苗时,小猴是懵...
    哎米粒啊阅读 169评论 0 1