属性操作与事件

浏览器事件

onload:浏览器加载完成执行

onscroll:滚动浏览器滚动条时触发

document.documentElement.scrollTop

document.body.scrollTop （这两种有兼容性问题）

dom0操作（只能绑定一个）

例子

document.getElementsByTagName("button")[0].onclick=function(){

    console.log(111);}

dom2操作（可以绑定多个）addEventListener（"事件类型"，"函数"，"是否捕获"）

捕获   从里到外

冒泡  从外到里

 

例子

document.getElementById("box2").addEventListener("click", function () {

console.log("中间");}

解绑监听事件

removeEventListener("事件的类型",事件的处理程序 （必须是同一个函数）)

  function  dome(){打印一次停止

        console.log("内部");

        document.getElementsByTagName("button")[0].removeEventListener("click", dome)

    }

    document.getElementsByTagName("button")[0].addEventListener("click", dome )

pageX/Y：相对于文档边缘,包含滚动条距离

clientX/Y：相对于当前页面且不包含滚动条距离

主流浏览器 event    ie8及以下 window.event

组织冒泡stopPropagation

var event = event || window.event

event.stopPropagation();

阻止默认事件

e.preventDefault();

例子

document.getElementsByTagName("a")[0].onclick = function (e) {

e.preventDefault();

}；

getAttribute("属性的名字")

removeAttribute("属性"):不仅可以移除元素本身的属性，还可以移除元素自定义的属

setAttribute("属性的名字","属性的值");

1. 对象.style
2.  对象.className
3. 对象.setAttribute("style")
4. 对象.setAttribute("class")
5. 对象.style.setProperty("CSS属性","CSS属性值")
6. 对象.style.cssText
7. 例子

document.getElementById("zi").onclick = function () {

        // this.style.color = "red"

        // this.className = "pink"

        // this.setAttribute("style","color:green;font-size:30px;")

        // this.setAttribute("class","pink")

        // this.style.setProperty("color", "blue")

        // this.style.cssText = "height:80px";

    }