JS5---事件的监听，冒泡捕获事件，事件的委托

dom元素事件的操作

一. dom事件

 *  键盘事件
    onkeydown  onkeyup  onkeypress(鼠标按下加抬起:按键事件)
 *  鼠标事件 
    onmouseover   onmousemove  onmouseout（包涵垂直离开）  
  	onmouseleave(水平离开)  onclick  ondbclick  onmousedown
    onmouseup  oncontentmenu(鼠标右击，出现菜单)  onmouseenter（鼠标进入事件）
*   表单事件
    onfocus(获焦)   onblur(失焦)   onselected  onchange（改变）
 *  浏览器事件
    onload(加载完成)   onreload (重新加载)  onresize(浏览器窗口变化)
    onerror(图片加载失败)

二.事件在js中的写法

1. 直接在标签上写

<a href="javascript:;"  onclick="hello()">

<script>
function hello(){
	 alert("hello world!");
}
</script>

2.动态绑定事件

事件里面的this 代表的是当前正在执行的对象

语法: 事件.对象 = 函数 (不可一次性绑定多个事件)

①匿名函数

 var btn = document.querySelector("#btn");
 btn.onclick = function () {
 alert("你点我");
 btn.onclick=null;
 }

语法: 事件.对象 = 函数名称（不加括号）

②其他函数

 btn.onclick=showalert;// 函数名称  不加括号
 function showalert(){
 alert("你点我");
 }

3.事件的监听

语法:对象.addEventListener(事件名 ,函数 ,flase/true);

①事件名不加 on
②flase 为冒泡 从里到外，true为捕获 从外到里 。若不写第三个参数则默认为冒泡

优点:① 可以绑定多个事件 (常规的事件绑定只执行最后绑定的事件)

可以给同名的事件，绑定多个事件处理程序
同名事件不会覆盖，而是会依次执行

②可以解除相应的绑定

语法: 对象.removeEventListener(事件名 ,函数 ,flase/true);

//绑定多个事件
btn.addEventListener('click',function (  ) {
     alert('11111');
 },false);

btn.addEventListener('click',function (  ) {
    alert('2222');
},false);

//解除事件的绑定
<input type="button" value="click me" id="btn5">

<script>
	var btn5 = document.getElementById("btn5");
	btn5.addEventListener("click",hello1);//执行了
	btn5.addEventListener("click",hello2);//不执行
	this.removeEventListener("click",hello2);
	
	function hello1(){
	 alert("hello 1");
	}
	function hello2(){
	 alert("hello 2");
	}
</script>

冒泡与捕获

1.了解事件捕获与冒泡

冒泡: 当父级元素拥有同名事件时才会被触发
捕获: 去寻找与父元素具有同名事件的子元素

<ul>
    <li>1</li>
    <p>1111</p>
    <li>2</li>
</ul>
<script>
 
  	 var ul = document.getElementsByTagName("ul");
     var li = document.getElementsByTagName("li");
     ul[0].addEventListener("click", function () {
     console.log(1);
     },true);               //①事件的捕获，点击ul输出 1 2  外到里 ②若为事件的冒泡，输出2 1  里到外
     li[0].addEventListener("click", function (e) {
     e.stopPropagation();
     console.log(e.target);  // <li>1</li>
     console.log(2);         //阻止事件捕获，输出为 2
     },true);  
</script>

2.阻止冒泡

语法: e.stopPropagation( ); e为事件的执行参数

三.事件的执行参数

e表示正在触发的对象所对应的事件

document.body.onkeypress=function (e) {
	e=e||window.event;                //有时写这句话是为了浏览器的兼容性（可以省略）
    console.log(e);                   //由上述图片可以看出e对应的是一个事件
    console.log(e.keyCode);           //获取按键键值  ASCII值
    console.log(e.code);              //获取键值  eg: keyA  space....
}        
 //事件的执行对象直接添加事件匿名函数上面

---

  另一种写法:
  可以直接声明变量使用window.event  调用事件的执行对象
      document.body.onkeypress=function () {
        var e=window.event;           //匿名函数括号中不写 e
        console.log(e);
        console.log(e.keyCode);
        console.log(e.code)
    }

---

e.pageX, e.pageY 鼠标移动的 x，y坐标

document.documentElement.onmousemove=function(e){
    e=e||window.event;
    console.log(e.pageX, e.pageY);
}
 // e.clientX, e.clientY 有时为了浏览器兼容性将坐标写成下边这样
	var x= e.pageX|| e.clientX;
    var y= e.pageY|| e.clientY;

e.target

当前正在触发的对象

若鼠标移动事件 则会显示出鼠标当前在的位置的标签名

四.this对象

1.函数里边的this 指代window对象

 function a(){
     console.log(this); //window 
    }
 a();

2.事件里边的this 指代当前执行事件的对象

<button class="btn"></button>
<script>
  var btn=document.querySelector(".btn");
    btn.onclick=function(){
        console.log(this);     //<button class="btn"></button>
    }
</script>

五.dom元素属性操作

1.js代码若写到header中
window.onload 加载完成事件 dom元素已经渲染完成

 window.onload=function(){
    这里边是你的js内容
}

2. js里面获取或设置元素的属性

1.innerHTML 获取文本值，但可以自动解析标签
2.innerText 只获取文本值，无法解析标签
3.value 针对表单元素

<button id="btn"></button>
<script>
	var btn = document.getElementById("btn");
	 console.log(btn);
    
	 btn.innerHTML="<span>123</span>";
	 btn.innerText="<span>123</span>";
	 btn.value="111";
	 btn.className="btn blist";  //js中给元素赋类名称（前面的为旧名称，后边的为新名称）
</script>   

运行结果如图:

---

js获取其他属性方式

语法：对象.style.属性
eg : btn.style.backgroundColor

console.log(btn.getAttribute("id"));    //获取id名称 
console.log(btn.getAttribute("class"));  //获取class名称
console.log(btn.getAttribute("style"));  //获取style

元素自定义属性

getAttribute也可以用来获取自定义的属性

1.给元素设置自定义属性
data-src setAttribute(）

  eg：①btn.setAttribute("data-src", "./img/1.jpg");
	 ② < img data-src="./img/1.jpg">

2.读取自定义属性
btn.getAttribute("data-src");

3.js样式的相关操作

1. j s操作的样式为元素的行内样式
   js不能直接eg操作内嵌或者外部样式

2. 如何获取内嵌样式或者外部样式

window.getComputedStyle();只可以获取，但没办法去更改
eg：window.getComputedStyle( btn.width）；

js里面数据类型的强制转化

1.parseInt 强转为整数型
2.parseFloat 强转为浮点型

    var a = "123";
    console.log(parseInt(a));    //123
    var b = "1.23";
    console.log(parseFloat(b));  //1.23
    console.log(parseInt(b));    //1

    var c = "100px";
	console.log(parseInt(c));    //100
    var m = "px100";
    console.log(parseInt(m));    //NaN

六.事件的委托

事件的委托 click事件委托

父级把他的事件委托给特定子集

    //输出的当前点击的元素
    //找到委托的元素对象
     <ul>
    <li>111</li>
    <p>5464</p>
    <li>11222</li>
</ul>
<script>
var ul = document.getElementsByTagName("ul")[0];
var li = document.getElementsByTagName("li")[0];
ul.onclick = function (e) {

    var child = e.target || e.srcElement;        //当前鼠标点击的对象
  
    if (child.nodeName.toLowerCase() == "li") {  //nodeName 节点名称 toLowerCase转化为小写
        console.log(1);
    }
}

参考文章链接：https://blog.csdn.net/weixin_42839080/article/details/81909675