LV2之-----day6,7( Dom 获取与设置属性 & JS事件绑定与代理)

本文链接：https://blog.csdn.net/DU123_/article/details/89880550

本文主要介绍了DOM获取和设置属性，以及JS事件绑定，包括DOM 0级和DOM 2级事件处理。详细讨论了事件冒泡、事件对象、事件代理以及如何取消事件绑定。文中还提到了DOM 0级事件的缺点，即无法绑定同类型多个事件，而DOM 2级事件则可以。此外，还探讨了事件流的概念，指出浏览器默认支持事件冒泡。

摘要由CSDN通过智能技术生成

LV2之-----day6,7( Dom 获取与设置属性 & JS事件 & 事件绑定)

一，先了解JS 事件：即与用户发生交互的一个过程
事件举例：

鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键

注意：事件通常与函数配合使用，当事件发生时函数才会执行。
相关详细参考文章：JavaScript 事件（常用）

二、事件绑定与取消事件:
DOM事件：分为DOM 0级事件 ,DOM 2级事件
1，DOM 0级事件（即传统绑定事件，下面两种方式）

方式一

<input id="btn" type="button" onclick="console.log('You clicked the button!');" value="Click" />

上面定义了一个按钮，在按钮中定义了onclick事件，就是在控制台输出一句话。效果如下图所示：
在这里插入图片描述
上面就是一个所谓的ｄｏｍ０级的事件处理。

方式二：就是直接用 js 操作

document.getElementById('btn').onclick = function() {
   
            console.log('Ｉ　am ｐｒｏｃｅｓｓｅｄ by dom0!');
        };

下面是点击按钮后的效果：
在这里插入图片描述
注意：　用传统绑定时，对于上面的ｂｕｔｔｏｎ，其实通过了两种方式去定义它的事件处理，一是在input标签里，二是在ｊｓ中去处理。但是，在ｃｏｎｓｏｌｅ上只输出了一句话。也就是说，在ｄｏｍ０级事件处理中，后定义的事件处理会覆盖前面的。

2.ｄｏｍ２级的事件处理：

document.getElementById('btn').addEventListener('click', function() {
   
         console.log('I am processed by dom2!');
 });       
document.getElementById('btn').addEventListener('click', function() {
   
         console.log('I am processed by dom2 again!!');
});

下面是点击按钮后的效果：
在这里插入图片描述
注意： 在ｄｏｍ２级事件处理中，对一个按钮点击的事件处理就没有被覆盖掉。所以，ｄｏｍ０级和ｄｏｍ２级事件处理，在形式上和功能上都是有差异的。这就是ｄｏｍ０级和ｄｏｍ２级事件最简单也最常用的不同之处了。 dom2可以绑定多个同类型的事件

再来一个dom2的代码示例：

 DOM2级事件绑定
var btn=document.getElementById('btn')
// btn.addEventListener(不加on的事件类型, 事件处理程序即一个函数 ,布尔值即冒泡与捕获)// 适用于 DOM浏览器(即标准浏览器)  IE9及以上也支持

btn.addEventListener('click',function(){
   
    alert(1)
 })
可以绑定多个同类型的事件
btn.addEventListener('click',function(){
   
    alert(2)
})

-------------------------------------------------------其他相关内容演示参考代码如下：
DOM事件小结:

一,DOM 获取属性与设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM 获取属性与设置属性</title>
    <style>
        .box{
   
            width: 300px;
            height: 300px;
            background:deeppink;
        }
        .deepskyblue{
   
            background: deepskyblue;
        }
    </style>
</head>
<body>
<button onclick="changeSrc()">点击替换图片</button>
<div class="box">
    <img src="images/02.jpg" alt="" title="">
    <img src="images/01.png" alt="" title="">
</div>
<span id="mybox" class="myspan" title="hahahahaha">我是span</span>
<script>
var box=document.getElementsByClassName('box')
var img=box[0].getElementsByTagName("img")
var myspan=document.getElementsByClassName("myspan")
function changeSrc(){
   
    // console.log(img[0].getAttributeNode('src').nodeType)
    // console.log(img[0].getAttributeNode('src').nodeName)
    // console.log(img[0].getAttributeNode('src').nodeValue)
    // console.log(img.getAttributeNames("src"))
    // console.log(img.getAttribute('src'))
    // img[1].setAttribute('src',img[0].getAttribute('src'))

    // box[0].setAttribute('class',"box deepskyblue")
    // console.log(box[0].getAttribute('class'))

    // 简写属性
    // console.log(box[0].className)
    // console.log(img[0].src)
    // console.log(img[0].src)    得到的是绝对路径
    console.log(myspan[0].title)
    myspan[0].id='aaaa'

}
</script>
</body>
</html>

二,事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件绑定 </title>
</head>
<body>
<button onclick="chickMe(2)"> 点击</button>
<button id="btn">点击2</button>

<script>
// 1 、传统事件绑定  <button οnclick="chickMe()"> 点击</button>  DOM0级事件
function chickMe(num){
   
    alert(1111+num)
}

// 2 、传统事件绑定 btn.onclick   DOM0级事件
btn.onclick=function(){
   
    alert(2222)
}

btn.onclick=function(){
   // 会覆盖上面的 
    alert(3333)
}

// btn.οnclick=chickMe()//不要加括号  加了 立即执行

btn.onclick=function(){
   
    chickMe(4)
}//函数传参 放入匿名函数

// 取消传统事件绑定
btn.onclick=null