js之事件
**1. childNodes 只读 子列表集合
标准下:包含了所有的文本节点和元素节点
非标准(ie):只包含元素节点,并且不包含非法嵌套的元素。
元素节点:1
属性节点:2
文本节点;3
12种类型nodeType
获取所有的子节点包括空格
aLi[i].style.background = 'red';
包含了文本节点,文本节点没有style所以将会报错
2.
console.log(oUl.attributes[0].name + ' ' + oUl.attributes[0].value);
属性值和名称
3.
只包含元素节点
oUl.children
4.
firstChild:第一个子节点 只读
标准下:会包含所有的所有节点,文本·元素
非标准下:只包含元素节点
firstElementChild:标准下第一个元素节点,非标准没有此属性.
5.
var oFirst = oUl.firstElementChild || oUl.firstChild;
if(oUl.children[0]) {
oUl.children[0].style.background = 'aqua';
}
var oLast = oUl.lastElementChild || oUl.lastChild;
oLast.style.background = 'red';
var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
oNext.style.background = 'green';
var oPrevious = oLast.previousElementSibling || oLast.previousChild;
oPrevious.style.background = 'blue';
6.
parentNode:父节点
offsetParent
(第一个有定位的父元素,没有则默认为body,IE6默认为html.)
7.
offsetLeft[Top]:当前元素到定位父级元素的距离
也就是到offsetParent的距离
没有定位父级:
offsetParent:body
offsetLeft:html
有定位父级:
自己有定位:到父级的距离
IE 6,7自己没有定位 到body
8.
width:样式宽
clientWidth: width + padding 可视区域的宽,,比如有滚动条则其他区域看不见
offsetWidth:占位宽 width + padding + border
offsetLeft/Top
scrollLeft/Top
两个距离两个宽度
9.
div1.style.width只可以获得内嵌样式,写入的也是内嵌样式,不改变css里面的值
console.log(getComputedStyle(oDiv).width);
console.log(oDiv.clientWidth);
console.log(oDiv.offsetWidth);
10.
var pos = {
'left' : 0,
'top' : 0
};
while (obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}
每次都找到与父元素的距离并且相加,最终得到与页面的最终距离。
11.
createElement('tagName');appendChild(obj);insertBefore(obj,beforeObj)
relaceChild(obj,beforeObj)
createTextNode;
insertBefore IE省略第二个参数报错
其他标准,当做appendChild()
appendChild,insertBefore,replaceChild,removeChild;
操作原有的节点,所有的方法将使原来的节点删除;将原来的第一个替换最后一个
那么第一个将变为最后一个,第一个删除;相当于剪切,粘贴
**
DOM事件
1. open(url,target...) 返回新打开窗口的window对象
第一个默认为空白窗口
第二个默认为新窗口
window.close(): 1.火狐下面无法关闭
chrome: 2.关闭
IE : 3.询问用户
obj.close()可以关闭
2.
window.navigator.userAgent
window.location
3.getElementsByClassName 有可能name是复合类名 class=box box1 则找出来的不是这个
4.
addClass{
1.没有class直接加
2.有,查看有没有存在要加入的class 没有再加入
}
removeClass{
判断有class才进行删除,查找到classname的index不是-1则删除。
}
5.
不写tbody浏览器也会自动增加,所以最好每次写上,避免出现不必要错误(导致table.firstChild每次都是tobody)
tHead
tBodies
tFoot
rows
cells
var newOtd = oTab.tBodies[0].rows[1].cells[2].innerHTML;
6.
处理表单:
用name属性调用更加方便 form[0].name;
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<!
<!
<select name="city" value="">
<option value="">请选择城市</option>
<option value="beijing">北京</option>
<option value="shanghai" selected="selected">上海</option>
</select>
onchange
text:标准下光标离开了才会触发
radio/checkbox:标准下值改变了就触发
非标准下改变了光标离开了才触发
7.
onsubmit: 事件
submit(): 提交的方法
reset(): 重置不是清空默认的还在
oForm.onsubmit = function () {
if(oForm.text1.value == '') {
alert('请输入内容');
return false;
}
oForm.onsubmit = false;//阻止提交
};
oForm.onreset = function () {
return confirm('你确定要重置?');
}
setTimeout(function () {
oForm.submit();
},2000);
//定时提交
8.
可视尺寸
document.documentElement.clientWidth
滚动条的距离:
document.documentElement.scrollTop/left
document.body.scrollTop/left
内容的宽高度:
document.documentElement.scrollWidth/height
document.body.scrollWidth/height
文档宽高:
document.documentElement.offsetWidth/height
document.body.offsetWidth/height
width:样式宽
clientWidth: width + padding 可视区域的宽,,比如有滚动条则其他区域看不见
offsetWidth:占位宽 width + padding + border
onscroll,resize都是按时间算的,时间越长那么数字越大
9.
window.onscroll = function () {
document.title = i++;
};
window.onresize = function () {
document.body.innerHTML = count++;
};
document.documentElement.scrollTop || document.body.scrollTop
Event事件
1.
通过一些方式给元素设置焦点
1.点击
2.tab
3.js
onfocus:当元素获取焦点时触发
几个方法:
focus(),blur(),select();
可以使元素开始获得焦点使用户有个好的体验
select()全选
2.
一个函数是不是事件函数取决于调用,而不是定义
event: 全局下:chrome:undefined,IE:null。ff:报错
ff,chrome,IE标准下:事件对象通过第一个函数参数传入,非标准IEundefined
event = event || window.event;
onmousemove:触发频率不是像素而是间隔时间,(很短)
3.
事件冒泡:从最底层一直到window
没有加事件的情况下,发生了事件但是没有给它加动作。发生了click但是没有做事情。
cancelBubble = true;取消冒泡机制.
利用这个机制,只需要在父级加事件函数即可,少写很多代码!
不需要冒泡的特例:只有取消了冒泡机制不会影响到父级。
4.
利用事件冒泡机制只要对父元素进行操作,则子元素执行动作时父元素也会察觉到
5.
if(obj.addEventListener) {
obj.addEventListener(eventName,fn,false);
} else {
obj.attachEvent('on' + eventName,function () {
fn.call(obj);
});
}
Event事件二
1.
点击事件触发的顺序是先从外层进入到里层,再从里层到外层一共是一个来回;
而addEventListener(eventName,fn,boolean);true(捕获
2.
解除事件:
DOM0级事件
obj.onclick = null;
ie:obj.detachEvent(事件名称('onclick'),函数名称),
其他obj.removeEventListener(事件名称('click'),函数名称,boolean)参数要一致
3.
onkeydown:键盘按下触发事件
onkeyup:键盘松开触发事件
event.keyCode: 数字类型 键盘按下的键
shiftKey,ctrlKey,altKey
document.onkeydown = function (ev) {
ev = ev || event;
alert(ev.ctrlKey + ev.keyCode);
};
4.
事件默认行为:当一个事件发生时浏览器默认发生的事情!
滚动条,a标签......
阻止默认行为在当前事件发生的处理函数return false。(只阻止默认行为)
onclick
addEventListener
if(event.preventDefault) {
event.preventDefault();
}
return false;
oncontextmenu右键菜单事件,当右键菜单(环境菜单)显示出来再触发
document.oncontextmenu = function (ev) {
return false;
};
5.
利用按键进行移动,根据方向键的判断让div的left进行变化。
6.
document.onclick = function (ev) {
ev = ev || event;
alert(ev.ctrlKey);
};
判断点击时同时按下的键。