Web API学习笔记(二) DOM获取css选择器 ，事件注册

1.获取元素对象 选择器[!!!]

• 语法:可以使用CSS选择器;

  document.querySelector(‘CSS选择器’)

document.querySelector("#box");
document.querySelector(".father");//只返回一个
//没有找到返回 null

​ document.querySelectorAll(‘CSS选择器’)

document.querySelectorAll(".father");
//返回伪数组,可遍历

##2. 操作属性

• 获取:getAttribute() 参数 :传入查询的 自定义属性名称;返回:查询的结果,自定义属性的值;字符串

  侧重于自定义属性;获取标准属性也可以

• 修改:box.setAttribute() 添加或者修改属性的值

  参数:第一个属性名.第二个属性值(没有返回值)

• 删除:box.removeAttribute() 删除某个属性

  参数:删除属性名

##3. 注册事件

• on事件名弊端：

  • 本质相当于是把一个函数存储到 了 on 这个属性里面 ， 后面被重复赋值了，会覆盖；on的方式注册，

  • 无法多次注册；团队协作时，有可能别人写的代码，会把你的覆盖了。

• addEventListener：添加事件监听，可以多次注册事件；

//获取按钮元素
document.querySelector(".btn");
//  参数： 事件类型 - 字符串； 事件处理程序 - function 
// 返回值：undefined
btn.addEventListener('click', function() {
    console.log(123);
})
btn.addEventListener('click', function() {
    console.log(456);
})
btn.addEventListener('click', function() {
    console.log(789);
})

##4. 事件执行的三个阶段

###捕获与冒泡

• 事件发生的时候，必然存在这三个传播的阶段：捕获、到达目标、冒泡；

• 捕获:从根部节点一层一层网上找,直到找到我们刚才触发的那个节点,这个过程叫捕获;

• 达到目标:找到我们刚才触发的那个节点

• 冒泡:从找到的目标节点,一层一层往根节点传递,这个过程叫冒泡;

//注册事件
var btn = document.querySelector("button");
btn.addEventListener("click",function(){
    alert(1);});
//点击btn后,信号从根部一层一层捕获到btn目标节点,发现btn刚好注册了点击事件,函数被执行完,信号冒泡回到根节点;

• 冒泡执行：当事件传播到某个元素身上，如果该元素也注册 了同类型的事件，也会执行对应的事件处理程序；**事件默认是在冒泡阶段执行；**如果子元素没有注册点击事件,但是父元素注册了点击事件,点了子元素父元素会被触发点击事件

• 为什么事件默认是在冒泡阶段执行?用户体验

5. 阻止冒泡

• 体验,事件默认冒泡阶段执行,用户只想点击当前的有反应就行，上面的不需要再冒泡执行了。

• Propagation：传播； 函数里一定要写形参e!!!

// 要阻止冒泡，需要先得到事件对象，给处理程序添加一个形参就行
box.addEventListener('click',function(e){
  // 调用阻止事件冒泡的方法进行阻止
  // 事件对象 e 把该次点击这个过程看成一个对象
  console.log('23333');
      e.stopPropagation();//掐断出去的传播信号
});

6. 事件对象

• // 获取时间对象
  事件源.on+事件类型 = function(事件对象){   }
  
  事件源.addEventListener(事件类型,function(事件对象){});
  

• 属性：

  // 鼠标位置
  
  // 可视区域坐标系 - 以浏览器的可视区域的左上角为原点的
  // 可视区域：就是元素用来显示内容的区域
  e.clientX//当前窗口可视区域
  e.clientY
  
  // 页面坐标系  -  以body的左上角作为原点
  e.pageX
  e.pageY
  
  
  // 事件的目标对象，用户点击到谁上面了；
  事件对象.target//点击是谁就是谁 dom
  
  // 事件的绑定对象，就是是绑定在哪个DOM节点上 和 this一样
  // 前面说的事件源
  e.currentTarget==this -----> true//事件注册给谁就是谁
  this==e.currentTarget//true
  

7. DOM事件对象上的方法

• 方法：

// 阻止冒泡
事件对象.stopPropagation();
// 阻止默认行为；
事件对象.preventDefault();
// 页面右键事件 查看右键菜单
document.oncontextmenu = function(e){
  e.preventDefault();//阻止了默认的右键的菜单
}
// 阻止a标签转跳
var a = document.querySelector("a");//获取a标签对象
// 1 把a标签的href属性设置为 javascript:void(0);
// 2 在a标签的点击事件里面，return false;
// 3 使用事件对象.preventDefault();
a.addEventListener('click', function(e) {
    e.preventDefault();//阻止了默认的跳转
});

小结

• 获取:css选择器:querySelector querySelectorAll:

• 操作自定义:DOM.getAttribute / setAttribute / removeAttribute ,不用受HTML data属性名,这种格式约束,也能修改标准属性

• addEventListener:解决被多次覆盖(同一个事件,多次注册)的问题;

• 事件执行的阶段:捕获,达到目标,冒泡；

• 事件默认在冒泡阶段执行：

  • 孙子注册了点击事件，父辈们也注册了点击事件，
  • 点击孙子，先执行孙子自己的函数，父辈们的事件被随着冒泡的传递到哪里，相应执行；

• 事件对象：

  • 位置：参数，函数内部使用。对象；
  • 方法：e.stopPropagation（）；阻止冒泡这条线；
  • 属性：
    • e.clientX e.clientY：获取鼠标位置
    • e.pageX e.pageY 获取鼠标位置
    • e.target ： 触发是谁就是谁 ---->DOM节点
    • e.currentTarget:事件注册给谁就是谁 ,相当于this;------->dom节点
    • e.preventDefault() 阻止默认行为

8.委托事件

• 新属性:innerHTML 获取内部HTML结构

//点击ul新增li标签.
ul.innerHTML+="<li class="son">aa</li>";

//给每个li标签,点击之后弹窗1;
//1.获取所以的li
var lis = document.querySelectorAll("li");
2.循环  注册事件
for (var i = 0;i<lis.length;i++);{
    lis[i].onclick = function{alert(1);}

• 需求：给li标签注册点击事件，新增的li标签也要有点击事件；

 var lis = document.querySelectorAll('ul > li');
  // console.log(lis);
  // 注册事件
  for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
      console.log(123);
    }
  }

  var ul = document.querySelector('ul');
  var btn = document.getElementById('btn');
  btn.onclick = function () {
    // 给ul添加新的元素
    var old = ul.innerHTML;
    old += '<li>新的li</li>'
    ul.innerHTML = old;
  }

###实现

• 什么是事件委托？把事件注册在前代元素身上，利用事件冒泡，当事件传播到已经注册了事件的前代元素身上，判断触发事件的事件目标是否是指定的元素，如果是，就执行逻辑，否则什么都不管；

  • e.target.nodeName == “LI”（返回大写的标签名）

  • e.target.className==“son”

• **什么时候用？**当我们需要给动态创建（不是一开始写死的，是后期可能会变的元素）的元素实现注册事件的效果的时候；

  // 利用ul的点击事件，模拟实现给li注册事件的过程
  ul.addEventListener('click',function(e){
    // 判断被点击的是不是子元素li
    // 只要判断 e.target 是否是我的子元素即可
    // 判断e.target 是否是 li 元素, 节点都有一个属性 ： nodeName 里面就是 大写的标签名
    // 只需要判断 nodeName 是不是LI 即可
    if(e.target.nodeName === 'li'){
      // 点击的就是li - 就执行代码
      console.log('li被点击了');
    }
      
      
    // 在事件对象中，还有一个属性target，这个属性指向事件目标
    // 注意，this目前拥有指向 注册事件的元素；e.currentTarget指向绑定事件的元素的对象，事件源；
    console.log(e.target,e.currentTarget==this);
    
  });

9.事件类型补充

//mousedown：当鼠标的按键被点下的时候触发
//mousemove：鼠标在某个元素身上移动的时候触发
//mouseup ：当鼠标的按键被松开的时候触发

//需求:让img跟着鼠标动;
//分析:1.鼠标移动事件注册给box;
var box = document.querySelector(".box);
var img = document.querySelector("#img);

//2.如何跟着动?获取坐标 
 box.onmousemove = function(e){
img.style.left = e.clientX+"px"
img.style.left = e.clientX+"px"

}

10. 获取元素对象在页面中的位置

• div.style.left 不显示,原因:这种方法只能获取行内样式

div.offsetTop div.offsetLeft解释:距离offsetParent(有定位的父亲)的水平和垂直距离，没有定位父亲则是body

• 基础细节补充:如果盒子定位了,margin 会影响定位!!! 定位是以margin的外边定位

11. 解绑事件

• 事件解绑：事件无效；

  • 希望曾经注册了的事件，在触发之后，无法执行对应的事件处理程序了；

  • 事件触发的时候，把事件解绑。那么下次你再次点击的时候，就无效了。

• 抽奖案例

var btn = document.getElementById('btn');
btn.onclick = function(){
  btn.onclick = null;//onclick被覆盖成null，所以不起作用了
  console.log('谢谢惠顾');
}

var btn = document.getElementById('btn');
btn.addEventListener('click',function fn(){
  // 解绑 当前的函数
  btn.removeEventListener('click',fn);//注销fn的click事件类型
  console.log('抽奖了');
})