JS DOM属性操作与事件

鼠标事件：

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

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

 

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

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

 

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

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

 

 

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

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

 

 

键盘事件：（一般用于input 和用户有交互）

onkeydown：键盘按下

onkeyup:键盘抬起  

 

浏览器事件：

 

onload:浏览器加载完成执行

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

 

 

事件进阶

（1）监听事件

绑定监听事件：

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

例：

document.querySelector("button").addEventListener("click",function(){

           console.log("内部")

        })

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

           console.log("中间")

        },true)

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

           console.log("外部")

        })

运行结果：

 

解绑监听事件：

removeEventListener("事件的类型",事件的处理程序)

 

 

事件对象：event

任何对象都有内置对象

 

元素的坐标：

 

1.clientX与clientY

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

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

 

2.pageX 和 pageY

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

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

有兼容性问题 从IE9以后才支持,pageY = clientY + 页面滚动出去的距离

 

 

事件冒泡：

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
假设一个元素div，它有一个下级元素p。
<div>
　　<p>元素</p>
</div>
这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？

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

 

阻止默认事件

（1）阻止事件冒泡

  var event = event || window.event;

    event.stopPropagation();

 

阻止事件默认行为：

什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

 

阻止a链接跳转

先获取再绑定

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

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

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

    return false;

  }

 

元素的属性操作：

（1）自定义属性

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

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

 

（2）获取属性

getAttribute("属性的名字")

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

 

（3）设置属性

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

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

(4)移除属性

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

 

 

元素样式设置的几种方式：

1、对象.style

2、 对象.className

3、对象.setAttribute("style")

4、对象.setAttribute("class")

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

6、对象.style.cssText