属性操作与事件

新事件

鼠标事件

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

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

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

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

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

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

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

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

键盘事件

onkeydown：键盘按下

onkeyup:键盘抬起

 浏览器事件

onload:浏览器加载完成执行

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

事件进阶

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

监听事件

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

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

事件对象与元素坐标

任何事件都有内置对象event

主流浏览器 event

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

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

ie8及以下 window.event

console.log(window.event);

事件冒泡

什么是冒泡事件

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

dom2操作 事件监听addEventListener(参数一事件类型，参数二函数，参数三是由冒泡变为捕获)

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

console.log(0);

 })

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

阻止默认事件

阻止事件冒泡

 document.querySelector("button").onclick = function(){

        console.log(1111);

        // 阻止冒泡

        var event = event || window.event

        event.stopPropagation();

    }

阻止事件默认行为

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

    // 阻止默认事件

    e.preventDefault();

  };

阻止A链接跳转

单return

 <a href="https://www.baidu.com" onclick="alert('单击链接了！'); return false">百度一下</a>

  <a href="https://www.baidu.com" onclick="fn1(); return false">百度两下</a>

 function fn1() {

    alert("单击链接了哈");

  }

第一种缺点：代码不分离，不符合低耦合，高内聚的规范

双return

  <a href="https://www.baidu.com" onclick="return fn2();">百度三下</a>

 function fn2() {

    alert("单击百度三了哈！");

    return false;

  }

第二种缺点：代码不分离，不符合低耦合，高内聚的规范

先获取再绑定

<a href="https://www.baidu.com" id="link">百度四下</a>

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

    alert("单击百度四了哈！");

    return false;

  }

第三种  行为与结构分离

元素的属性操作

自定义属性

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

获取属性

getAttribute("属性的名字")

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

设置属性

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

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

移除属性

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

元素样式设置的几种方式

1. 对象.style

2.  对象.className

3. 对象.setAttribute("style")

4. 对象.setAttribute("class")

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

6. 对象.style.cssText