简单事件操作

鼠标事件

onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。
onmouseout 鼠标移出事件：在鼠标指针移出元素后触发
onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。
onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发
onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发
onblur失去焦点事件：在鼠标光标失去焦点时触发。
onclick单击事件：在鼠标指针单击时触发
ondblclick双击事件：在鼠标光标双击时触发。

键盘事件

onkeydown：键盘按下

onkeyup:键盘抬起  一般用抬起事件

浏览器事件

onload:浏览器加载完成执行

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

介绍一种dom2的方法，也就是监听事件

监听事件

绑定监听事件 addEventListener("事件的类型",事件的处理程序)

box1.addEventListener("click", myFunc)

  function myFunc() {

    this.style.backgroundColor = "blue";

  }

 解绑监听事件removeEventListener("事件的类型",事件的处理程序)

 box1.removeEventListener("click", myFunc);

addEventListener() 方法为指定元素指定事件处理程序。addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序，能够向一个元素添加多个事件处理程序，并且能够向一个元素添加多个相同类型的事件处理程序，例如两个 "click" 事件。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

addEventListener(event, function, useCapture);
默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

事件触发有三个阶段：捕获，触发，冒泡
<div>
　　<p>元素</p>
</div>
这两个元素都绑定了上面的click事件，如果用户点击了p，它在div和p上都触发了click事件，那么就会有事件冒泡，先触发p的事件，然后冒泡到div触发div事件。

而捕获和他相反先div后p。

阻止默认事件

阻止冒泡
document.addEventListener('click',function(e){
    console.log('我爱你塞北的雪');
    var ev = window.event || e;//这写发是因为ie浏览器的兼容问题，event需要写成widow.event
    ev.preventDefault();//阻止事件默认行为

 阻止默认事件preventDefault（）写在方法里

.click(function (e) {
    e.preventDefault();
  });

元素的属性操作

获取属性

getAttribute("属性的名字")

getAttribute("属性"):不仅可以获取元素本身的属性的属性值，还可以获取元素自定义的属性的属性值

 console.log(in1.getAttribute("type"));//text

  console.log(in1.getAttribute("name"));//user

  console.log(in1.getAttribute("id"));//text1

  console.log(in1.getAttribute("style"));//color: red;

设置属性，自定义属性

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

元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属性

 setObj1.onclick = function () {
    in1.setAttribute("name", "password");
    in1.setAttribute("class", "");
    in1.setAttribute("style", "border:5px dotted pink");
    in1.setAttribute("aa", "123123123");
  }

1. 、移除属性

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

removeObj.onclick = function () {

    in1.removeAttribute("class");

    in1.removeAttribute("aa");
  }