JS 绑定及解绑事件
.addEventListener(‘事件类型’，命名函数，布尔值) //IE8不支持 (this代表的是当前绑定事件的对象)
.removeEventListener(‘事件类型’，函数名字，false) //移除事件(注意：addEventListener中的第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。)
事件冒泡：多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
如何阻止事件冒泡:
window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持。 event.stopPropagation(); 阻止事件冒泡—->谷歌和火狐支持
event对象的常用属性：
var e = event || window.event // window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准 event.type //事件类型 event.target //事件触发的元素
.attachEvent(‘on事件类型’，命名函数) //谷歌，火狐不支持 this代表的是window
.detachEvent(‘on事件类型’，函数名字) //解绑事件 - 对象.on事件名字 = 事件处理函数—>绑定事件 对象.on事件名字 = null
JS 事件类型
在元素的事件处理器中：this指代的就是元素本身
.onclick //点击事件
.onmouseover (鼠标移入事件) / .onmouseout(鼠标移出事件)
.onfocus (输入框获取焦点) / .onblur(输入框失去焦点)
.onkeydown (按下键盘某个键) / .onkeyup (按下某个键弹起)
JS element元素属性
.innerText (谷歌，火狐，IE8都支持) / .textContent(不支持IE8)
.innerHTML(标签内容可以被识别）
.setAttribute(“属性的名字”,”属性的值”) //设置自定义属性
.getAttribute(“属性的名字”) //获取自定义属性的值
.removeAttribute(“属性的名字”) //移除自定义属性
.style.backgroundColor //style属性还有很多其他属性
.getAttributeNode(‘id’) //获取的是元素的键名为‘id’的属性节点
.parentElement //父级元素
.childNodes //子节点
.children //获取子元素
.nodeType //节点类型 1—-标签，2—属性，3—文本
.nodeName //节点名字 标签节点—大写的标签名字，属性节点—小写的属性名字，文本节点—-#text
.nodeValue //节点的值 标签节点—null，属性节点—属性值，文本节点—文本内容
.parentNode //父级节点
.firstChild //第一个子节点
.firstElementChild //第一个子元素
.lastChild //最后一个子节点
.lastElementChild //最后一个子元素
.previousSibling //前一个兄弟节点
.previousElementSibling //前一个兄弟元素
.nextSibling //后一个兄弟节点
.nextElementSibling //后一个兄弟元素
JS element元素方法
.appendChild( obj1) //追加元素
.insertBefore( obj1,obj2 ) //将obj1插入到第二个参数元素obj2之前
.replaceChild( obj1,obj2 ) //替换其中某个元素
.removeChild( obj1 ) //删除其中某个元素
JS 特定元素属性设置
document.body.style.backgroundImage=”url(//img.png)”;
document.getElementsByTagName(“input”).checked = true;
JS 创建元素的方式
1. document.createElement(‘p’)； 2. 对象.innerHTML=”标签及代码”; 3. var ulObj = document.createElement(“ul”);
document.getElementsByTagName(“div”).appendChild(ulObj);
JS offset、scroll、client系列的值
style标签中设置的样式属性是获取不到的，然而在标签中设置的style属性的值时可以获取到的。
获取元素的宽高，使用offset系列的值
offsetWidth //获取元素的宽，有边框
offsetHeight //获取元素的高，有边框
offsetLeft //获取元素距离左边位置的值
offsetRight //获取元素距离上边位置的值
scrollLeft //向左卷曲出去的距离
scrollTop //向上卷曲出去的距离
scrollWidth //元素中内容实际的宽（如果内容较少，没有内容，就是元素自身的宽），没有边框
scrollHeight //元素中内容实际的高（如果内容较少，没有内容，就是元素自身的高），没有边框
clientWidth //可视区域的宽（没有边框），边框内部的宽
clientHeight //可视区域的高（没有边框），边框内部的高
clientLeft //左边框宽度
clientTop //上边框宽度
event.clientX、event.clientY //鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条
event.pageX、event.pageY //类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标（IE8不可用）
发表回复