js属性操作与事件

(1)、鼠标事件

案例一：完成对无序列表的隔行换色（原理~~~通过循环获取元素得到的伪数组进行取余逻辑判断操作）

onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。

onmouseout 鼠标移出事件：在鼠标指针移出元素后触发

//鼠标移入事件

  box1.onmouseover = function () {

    this.style.fontSize = "26px";

    this.style.height = "60px";

    console.log(111)

  }

  // 鼠标移出事件

  box1.onmouseout = function () {

    this.innerText = "鼠标移出了哈！";

    this.style.height = "30px";

    this.style.fontSize = "16px";

  }

onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。

onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发

// 鼠标进入事件

  box2.onmouseenter = function () {

    this.style.borderRadius = "12px";

    this.style.backgroundColor = "blue";

  }

  //鼠标的离开事件

  box2.onmouseleave = function () {

    this.style.borderRadius = "0";

    this.style.backgroundColor = "purple";

  }

onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发

onblur失去焦点事件：在鼠标光标失去焦点时触发。

 //获取焦点事件

  user.onfocus = function () {

    this.style.border = "3px solid red";

    this.style.outline = "0";

  }

  // 失去焦点事件

  user.onblur = function () {

    console.log(this.value);

  }

onclick单击事件：在鼠标指针单击时触发

ondblclick双击事件：在鼠标光标双击时触发。

box1.ondblclick = function () {

    this.style.backgroundColor = "yellow";

  }

(2)、键盘事件

onkeydown：键盘按下

onkeyup:键盘抬起  

 document.getElementById("user").onkeydown = function () {

    console.log("按下了！！1");

  }

  document.getElementById("user").onkeyup = function () {

    console.log("抬起来了！！1");

    console.log(this.value);

  }

(3)、浏览器事件

案例一：完成对无序列表的隔行换色（原理~~~通过循环获取元素得到的伪数组进行取余逻辑判断操作）

onload:浏览器加载完成执行 

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

  window.onscroll = function () {

    console.log("滚动了！");

  }

执行事件的步骤：获取元素、绑定事件、书写事件驱动程序

1. 、监听事件

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

box1.addEventListener("click", myFunc)

  function myFunc() {

    this.style.backgroundColor = "blue";

  }

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

 box1.removeEventListener("click", myFunc);

演示示例：绑定监听事件

1. 、事件对象

任何事件都有内置对象event，event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件对象的兼容性写法为

var event = event || window.event;

// 事件的类型

    console.log(event.type);

    // 元素的ID

    console.log(event.target.id);

    // 文本的内容

    console.log(event.target.innerText);

    // 事件的触发点是距离浏览器左侧的横纵坐标

    console.log("横坐标：" + event.clientX + "," + "纵坐标：" + event.clientY);

    console.log("横坐标：" + event.pageX + "," + "纵坐标：" + event.pageY);

    console.log("我单击header!");

1. 、元素的坐标

1、clientX与clientY

clientX 事件属性返回当事件被触发时鼠标指针相对于浏览器页面（或客户区）的水平坐标。客户区指的是当前窗口。

clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面（客户区）的垂直坐标。 客户区指的是当前窗口。

2、pageX与e.pageY

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

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

元素的属性操作

1. 、自定义属性

元素除了本身的属性之外可以设置自定义属性

<div id="box1" class="box_1" name1="divObj">我是盒子</div>

(2)、获取属性

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;

(3)、设置属性

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

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

 setObj1.onclick = function () {

    in1.setAttribute("name", "password");

    // in1.setAttribute("class", "");

    in1.className = "";

    // in1.setAttribute("style", "border:5px dotted pink");

    in1.style.border = "5px dotted pink";

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

  }

1. 、移除属性

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

  var removeObj = document.getElementById("remove");

  removeObj.onclick = function () {

    in1.removeAttribute("class");

    div1.removeAttribute("name1");

  }

元素样式设置的几种方式

1. 对象.style

2.  对象.className

3. 对象.setAttribute("style")

4. 对象.setAttribute("class")

5. 对象.style.setProperty("CSS属性","CSS属性值")

6. 对象.style.cssText