js回顾2

Posted 2020-07-16

1:事件流：一个事件发生时按一个方向传播 eg：a标签->html
冒泡：从里到外（一般的选择）-----IE只有冒泡
捕获：从外到里-----网景只有捕获（已经不存在了）

2、事件处理的两种种方式：
（1）DOM0（传统事件）:
优点：兼容所有浏览器
缺点：不能够添加多个方法，后面的方法会覆盖前面的方法
（2）DOM2：
优点：可以添加多个方法
缺点：不能兼容所有浏览器：
现代浏览器： p.addEventListener("click",function(){ }),true）；//第三个true可以不写
IE浏览器： p.attchEvent("onclick",function(){ })

3、clientX和clientY鼠标的位置

4、阻止冒泡：e.stopPropagation（）----现代浏览器
e.cancelBubble=true；----IE浏览器

5、阻止默认事件的发生：
e.preventDefault();---- 现代浏览器
e.returnValue=false;-----IE浏览器

6、DOM实现增、删、改、查（是w3c制定的规范，从DOM1开始）：文档对象模型
获取节点：var body=documet.body;
var d1=document.getElementById("d1");
var ps=document.getElementsTagName("p");

7、访问属性：var attr=ps.attributes;
attr["id"].nodeType;//属性节点
ps.id;//访问属性
ps.getAttribute("id");//访问属性
ps[0].firstChild.nodeType;//文本节点
body.nodeType.//元素节点 nodeType为数字
d1.firstChild.nextSibling.previousSibling;

8.增加节点：方法一：
a、获取父节点id： var div=document.getElementById("div");
b、创建节点：var p1=createElement("p");
c、创建文本：var text=createTextNode（"段落"）;
d、节点加进去：p1.appendChild(text);
1）div.appenChild(p1);//后面增加
2）var d1=document.getElementById("d1");
div.insertBefore(p,div)//前面增加
方法二; var div=document.getElementById("div");
div.innerHTML+="<p>啦啦啦啦</p>"

<table id=table></table>//ie不支持添加表格
var table=document.getElementById("table");
table.

9.删除节点：removeChild（）
10.替换节点：replaceChild（）
11.表单的提交：
<form id="regForm"></form>
var fm = document.getElementById("regForm");

方法一：fm.submit();
方法二：regForm.onsubmit = function(e){
// e = window.event || e;
// alert("表单提交");
// if(e.preventDefault){
// e.preventDefault();
// }else{
// e.returnValue = false;
// }