属性操作与事件

案例：美女画廊

 var imgList = document.querySelectorAll("div img");

    var bigImg = document.querySelector("footer img");

    //方式一：此处i是全局作用域，在执行函数之前，循环遍历就会结束。

    // for (var i = 0; i < imgList.length; i++) {

    //     imgList[i].onclick = function () {

    //         bigImg.src = this.src;         //this指向imgList[i]

    //     }

    // }

    //方式二：让i变成块级作用域，使用let声明i，块级作用域只在大括号内生效

    for (let i = 0; i < imgList.length; i++) {

        imgList[i].onclick = function () {

            bigImg.src = imgList[i].src;

        }

    }

ES6中：let声明i:i为块级作用域，且此声明不会提升

循环点击事件拿到i

 var imgList = document.querySelectorAll("div img");

    //方式一：保留属性

for (var i = 0; i < imgList.length; i++) {

        console.log(i);

        imgList[i].myindex = i;   //保留属性

        imgList[i].onclick = function () {

            console.log(i);

            console.dir(this.myindex);  

        }

    }

    //方式二：自执行函数构成闭包

    for (var i = 0; i < imgList.length; i++) {

        (function (i) {

            imgList[i].onclick = function () {

                console.log(i);

            }

        })(i)

    }

1.新事件

（1）鼠标事件

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

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

        onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。onmouseenter不支持冒泡

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

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

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

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

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

（2）键盘事件(只能在input标签中)

        onkeydown：键盘按下

        onkeyup：键盘抬起  

（3）浏览器事件

        onload:浏览器加载完成执行 （异步执行，暂时挂起，最后执行）

        onscroll:滚动浏览器滚动条时触发  （可以监听滚动条滚动距离）

2.事件进阶

（1）监听事件（DOM2事件）

DOM0事件：相同的事件处理程序，后面的会覆盖前面的。

DOM2事件：相同的事件处理程序，后面的不会覆盖前面的，可以同时生效。

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

box1.addEventListener("click", myFunc)   //此处事件类型写click、dblclick、mouseover等，均没有on

  function myFunc() {

    this.style.backgroundColor = "blue";

  }

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

给函数(事件的处理程序)起名，清除时用函数名访问

         box1.removeEventListener("click", myFunc); 

（2）事件对象

        任何事件都有内置对象event，event 对象代表事件的状态

        事件对象的兼容性写法为

var event = event || window.event;

// 事件的类型

    console.log(event.type);

    // 元素的ID

    console.log(event.target.id);   //事件源ID

    // 文本的内容

    console.log(event.target.innerText);

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

    console.log("横坐标：" + event.clientX + "," + "纵坐标：" + event.clientY);  //client浏览器

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

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

（3）元素的坐标

1、clientX与clientY

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

        pageX/Y事件属性返回当事件被触发时鼠标指针向对于文档边缘的水平坐标/垂直坐标。

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

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

（4）事件冒泡（重点）

<div>
<p>元素</p>
</div>
        冒泡事件：这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序是最里层先执行，事件顺序从里到外；

捕获阶段：最外层先执行，事件顺序从外到里。

注意：mouseenter不支持冒泡，而mouseover支持冒泡

3.阻止默认事件

（1）阻止事件冒泡

<script>

inner.addEventListener("click", function (event) {

    // 阻止默认冒泡事件的发生

    var event = event || window.event;

    // propagation n. 传播;  英[ˌprɒpə'ɡeɪʃ(ə)n]

    event.stopPropagation( );        //阻止这一层的后边冒泡，不阻止本层

    console.log("我单击到P元素上了！");

  })

  outer.addEventListener("click", function () {

    console.log("我单击到div元素上了！");

  })

</script>

（2）阻止事件默认行为

 <a href="http://www.baidu.com">测试</a>

$("a").click(function (e) {

    alert("默认行为被禁止喽");

    e.preventDefault( );

  });

附加：js跳转：window.location.href = ‘https://www.baidu.com/’

4.元素的属性操作

（1）自定义属性

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

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

（2）获取属性

getAttribute("属性的名字")

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

  }

（4）移除属性

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

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

  removeObj.onclick = function () {

    in1.removeAttribute("class");

    div1.removeAttribute("name1");

  }

7.元素样式设置的几种方式

1. 对象.style
2.  对象.className
3. 对象.setAttribute("style",”color:red”)
4. 对象.setAttribute("class")
5. 对象.style.setProperty("CSS属性","CSS属性值")      //不用写style了
6. 对象.style.cssText

        // 1、对象.style

    // box.style.backgroundColor = "red";

    // 2、对象.className

    // box.className = "box2";

    // 3、对象.setAttribute("style")

    // box.setAttribute("style", "background-color:red");

    // 4、对象.setAttribute("class")

    // box.setAttribute("class", "box2");

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

    // box.style.setProperty("background-color", "red");

    // 6、对象.style.cssText

    box.style.cssText = "background-color: red;height:80px";

  }