js05---节点、元素、事件、事件冒泡

目录

一、节点的概念(页面中所有的内容)

 二、元素的创建

三、事件的绑定

1、为一个元素创建多个点击事件

 2、绑定事件的区别

 四、事件的解绑

 五、事件冒泡

六、事件总结


一、节点的概念(页面中所有的内容)

1、父级节点/父级元素

obj.parentNode

obj.parentElement

2、子节点/子元素

obj.childNodes 节点比元素多

obj.children

第一个子节点 obj.firstChild

第一个子元素 obj.fristElementChild

最后一个子节点 obj.lastChild

最后一个子元素 obj.lastElementChild

前一个兄弟节点 obj.previousSibling

前一个兄弟元素 obj.previousElementSibling

后一个兄弟节点 obj.nextSibling

后一个兄弟元素 obj.nextElementSibling

//在ie8里面子节点兄弟节点 的获取都变成了元素

 //不常用

 二、元素的创建

1、document.write("标签的代码及内容")

2、对象.innerHTML = "标签及代码"

3、document.createElement("标签的名字");---返回的是对象

对象.appendChild(obj) //追加子元素

对象.insertBefore(obj,某元素) //插入某元素之前

对象.replaceChild(新元素,老元素) //替换子元素

对象.removeChild(老元素) //删除子元素

三、事件的绑定

1、为一个元素创建多个点击事件

$("#btn").addEventListener("click",函数1,false);------------------------------火狐和谷歌支持,ie8不支持

$("#btn").addEventListener("click",函数2,false);

对象.attachEvent("事件类型",函数)------------------------ie8支持,其他不支持

兼容代码

 2、绑定事件的区别

 四、事件的解绑

(用什么方式绑定事件,就应该用什么方式解绑事件)

1、第一种方式

$("#id").οnclick=null

2、第二种方式

$("#id").removeEventListener("click",函数,false);----------ie8不支持

3、第三种方式

$("#id").detachEvent("onclick",函数);------------------------ie8支持

解绑兼容代码

 五、事件冒泡

多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素事件触发了

那么外面的元素的事件自动触发

阻止事件冒泡

window.event.cancelBubble=true;-------------------ie特有

e.stopPropagation();------------------------------------火狐谷歌支持

六、事件总结

事件有三个阶段:

1、事件捕获阶段

2、事件目标阶段

3、事件冒泡阶段

猜你喜欢

转载自blog.csdn.net/m0_37756431/article/details/123354490