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

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事件，就是在控制台输出一句话。效果如下图所示：
LV2之-----day6,7( Dom 获取与设置属性 & JS事件绑定与代理)
上面就是一个所谓的ｄｏｍ０级的事件处理。

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

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

下面是点击按钮后的效果：
LV2之-----day6,7( Dom 获取与设置属性 & JS事件绑定与代理)
注意：　用传统绑定时，对于上面的ｂｕｔｔｏｎ，其实通过了两种方式去定义它的事件处理，一是在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!!');
});

下面是点击按钮后的效果：
LV2之-----day6,7( Dom 获取与设置属性 & JS事件绑定与代理)
注意： 在ｄｏｍ２级事件处理中，对一个按钮点击的事件处理就没有被覆盖掉。所以，ｄｏｍ０级和ｄｏｍ２级事件处理，在形式上和功能上都是有差异的。这就是ｄｏｍ０级和ｄｏｍ２级事件最简单也最常用的不同之处了。 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事件小结: LV2之-----day6,7( Dom 获取与设置属性 & JS事件绑定与代理)

一,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;
</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 onclick="bodyFn()">我是body
    <div onclick="divFn()">我是div
        <button onclick="btnFn()">我是按钮</button>
    </div>

<script>
function btnFn(){
    alert('我是btn')
}
function divFn(){
    alert('我是div')
}
function bodyFn(){
    alert('我是body')
}

// 事件流 --->传播顺序
/*
事件冒泡 IE     由内到外
事件捕获 DOM    由外到内      
*/
</script>
</body>
</html>

上述一,二,三,内容的应用代码:

.事件绑定——Dom2

<!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>Document</title>
</head>
<body>
    <button id="btn">点我</button>


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


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

function show(){
    alert(1)
}
function show2(num){
    alert(1+num)
}
btn.addEventListener('click',show)
var show3=function(){
    show2(2)
}
btn.addEventListener('click',show3)

// 取消事件
btn.removeEventListener('click',show)
btn.removeEventListener('click',show3)


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

.事件绑定——Dom2冒泡

<!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>Document</title>
</head>
<body>
    <div id="box">我是div
        <button id="btn">点我</button>
    </div>


<script>
var btn=document.getElementById('btn')
var box=document.getElementById('box')

// btn.addEventListener(不加on的事件类型,事件处理程序,布尔值)//DOM浏览器
/*
默认为false  代表 冒泡
true        代表 捕获
*/
btn.addEventListener('click',function(){
    alert(1)
},true)

box.addEventListener('click',function(){
    alert(2)
},true)

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

事件绑定——Dom2 IE

<!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>Document</title>
</head>
<body>
    <div id="box">我是div
        <button id="btn">点我</button>
    </div>


<script>
var btn=document.getElementById('btn')
var box=document.getElementById('box')

// btn.attachEvent(加on的事件类型,事件处理程序)  IE浏览器  ie8及以下  ie9及以上addEventListener和attachEvent是都可以使用
var show=function(){
    alert('btn')
}
btn.attachEvent('onclick',show)


// 取消
btn.detachEvent('onclick',show)


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

.事件绑定—Dom2兼容

<!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>08.事件绑定—兼容 与 函数注释</title>
</head>
<body>
    <div id="box">我是div
        <button id="btn">点我</button>
    </div>
     <!-- 封装一个事件绑定的函数 on
    function on(eleObj,handleType,handle){
        if(document.addEventListener){
            eleObj.addEventListener(handleType,handle)//DOM
        }else{
            eleObj.attachEvent('on'+handleType,handle)//ie
        }
    }
    
    on() -->

   <!-- 封装一个解除事件绑定函数  off ,写法类同上面的事件绑定不赘述-->  
   
 
<script src="my.js"></script>
<!--  函数注释: 参看 my.js -->-----------即如下代码
</body>
</html>


-----------------------------下面代码 是参看 my.js--------------------

var btn=document.getElementById('btn')
var box=document.getElementById('box')

function show(){
    alert('我是btn')
}
// btn.addEventListener('click',show,false)//DOM
// btn.attachEvent('onclick',show)//ie

// if(document.addEventListener){
//     btn.addEventListener('click',show,false)//DOM
// }else{
//     btn.attachEvent('onclick',show)//ie
// }

 下面内容为 函数的标准注释 用/**  */ 注释会自动显示    {}中写的是参数的类型,若要在html/css 页面写 需要安装插件
/**
 * 
 * @param {*} eleObj 
 * @param {function} handleType 
 * @param {boolean} handle 
 */


// 下面内容封装一个事件绑定的函数
function on(eleObj,handleType,handle){
    if(document.addEventListener){
        eleObj.addEventListener(handleType,handle)//DOM
    }else{
        eleObj.attachEvent('on'+handleType,handle)//ie
    }
}
// 有了上述的 函数注释,当调用该函数时 鼠标光标放入()中会自动根据上述注释 提示相关内容
on()

四,event事件对象

<!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> event事件对象 </title>
</head>
<body>
    <div id="box">
        我是div
        <br>
        <button id="btn">点我</button>
    </div>


<script>
var btn=document.getElementById('btn')
var box=document.getElementById('box')
// box.οnclick=function(){
//     var e=window.event || arguments[0]  //获取事件对象event, 本次事件发生的信息 
// 注意 arguments[0] 代表函数中默认的第一个参数 

//     console.log(e)
// }
------------------------分割----------------------------------

box.onmousedown=function(e){     //这种写法 匿名函数括号中 的内容不论写什么 绝对代表 event事件对象
    console.log(e)  //获取事件对象event,  下面的相关对象方法都可 在检查元素的Console 中查看到
    e.clientX    //鼠标在浏览器中坐标
    e.screenX   //鼠标在屏幕的坐标
    e.offsetX   //发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。

     e.which//which   属性返回onkeypress事件触发的键的值的字符代码
     console.log(e.target)   //DOM浏览器 获取目标元素
     console.log(e.srcElement)  //IE浏览器 目标元素  DOM浏览器也可以 

     console.log(e.offsetX)

     图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
     参看文章:  http://www.cnblogs.com/jiangxiaobo/p/6593584.html

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

五,js实现拖拽

<!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>
    <style lang="">
        #box{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            background: deeppink;
            /* margin-left: 300px; */
        }
    </style>
</head>
<body>
    <div id="box">
        box
    </div>


<script>

var box=document.getElementById('box')
document.onmousedown=function(){
    var downEv=window.event || arguments[0]  //每一个事件都要有一个单独的对象才能获取
    var downX=downEv.clientX;//鼠标按下坐标 在整个屏幕中
    var downY=downEv.clientY;//鼠标按下坐标
    var boxToBody=box.offsetLeft//盒子距离父元素左边距离
    var boxToBodyTop=box.offsetTop//
    var downToBoxLeft=downX-boxToBody//按下 距离盒子 左边 距离
    var downToBoxTop=downY-boxToBodyTop//
    console.log(downX,box.offsetLeft)

    document.onmousemove=function(){
        var moveEv=window.event || arguments[0] //每一个事件都要有一个单独的对象才能获取
        var moveX=moveEv.clientX;
        var moveY=moveEv.clientY;
        box.style.left=moveX-downToBoxLeft+'px'
        box.style.top=moveY-downToBoxTop+'px'
        console.log(moveX)
    }
}
document.onmouseup=function(){
    document.onmousemove=null
}
</script>
</body>
</html>

六,innerHTML

<!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>innerHTML</title>
    <style>
        .container{
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<!-- <div class="container">
        姓名: <input type="text" id="user">  
        班级: <input type="text" id="classNUM">  
        年龄: <input type="text" id="age">  
        <button onclick="addRow()">添加</button>
        <table width='500' border="1" id="tab">
            <tr>
                <th>姓名</th>
                <th>班级</th>
                <th>年龄</th>
            </tr>
        </table>
</div> -->
<input type="text" id="inp">
<button onclick="addContent()">我是btn</button>
<div>
    <h1>我是div的h1</h1>
</div>
<script>
// var user=document.getElementById('user')
// var classNUM=document.querySelector('#classNUM')
// var age=document.getElementById('age')
// var tab=document.getElementById('tab')
// function addRow(){
    
// }

var btn=document.getElementsByTagName("button")[0]
var div=document.getElementsByTagName("div")[0]
var inp=document.getElementById("inp")
function addContent(){
    // console.log(div.innerHTML)
    // div.innerHTML=btn.innerHTML
    // div.innerHTML=div.innerHTML+inp.value
    console.log(div.innerHTML)
    console.log(div.innerText)
    console.log(div.outerHTML)
    // div.innerText=inp.value
}

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

七, .this

<!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>this</title>
    <style>
        .container{
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<div class="container">
        姓名: <input type="text" id="user">  
        班级: <input type="text" id="classNUM">  
        年龄: <input type="text" id="age">  
        <button onclick="addRow()">添加</button>
        <table width='500' border="1" id="tab">
            <tr>
                <th>姓名</th>
                <th>班级</th>
                <th>年龄</th>
                <th>删除</th>
            </tr>
        </table>
</div>

<script>
var user=document.getElementById('user')
var classNUM=document.querySelector('#classNUM')
var age=document.getElementById('age')
var tab=document.getElementById('tab').getElementsByTagName('tbody')[0]
function addRow(){
    // tab.innerHTML=tab.innerHTML+"<tr><td>"+user.value+"</td><td>"+classNUM.value+"</td><td>"+age.value+"</td><td><button>删除</button></td></tr>"
    console.log(tab)
    tab.innerHTML=tab.innerHTML+
    `<tr>
        <td>${user.value}</td>
        <td>${classNUM.value}</td>
        <td>${age.value}</td>
        <td><button οnclick="delRow(this)">删除</button></td>
    </tr>`
    
    user.value=""
    classNUM.value=""
    age.value=""
}

function delRow(obj){
    var trObj=obj.parentNode.parentNode//父元素 
    console.log(obj,trObj)
    tab.removeChild(trObj)
}


</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>
    <style>
        .container{
            width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<div class="container">
        姓名: <input type="text" id="user">  
        班级: <input type="text" id="classNUM">  
        年龄: <input type="text" id="age">  
        <button onclick="addRow()">添加</button>
        <table width='500' border="1" id="tab">
            <tr>
                <th>姓名</th>
                <th>班级</th>
                <th>年龄</th>
                <th>删除</th>
            </tr>
        </table>
</div>

<script>
var user=document.getElementById('user')
var classNUM=document.querySelector('#classNUM')
var age=document.getElementById('age')
var tab=document.getElementById('tab')
var tabody=document.getElementById('tab').getElementsByTagName('tbody')[0]
function addRow(){

    console.log(tab)
    tabody.innerHTML=tabody.innerHTML+
    `<tr>
        <td>${user.value}</td>
        <td>${classNUM.value}</td>
        <td>${age.value}</td>
        <td><button>删除</button></td>
    </tr>`
    
    user.value=""
    classNUM.value=""
    age.value=""
}

function delRow(){
   console.log(1234)
}

tab.onclick=function(){
    var e=window.event||arguments[0]

    console.log(e.target.nodeName)
    if(e.target.nodeName=='BUTTON'){
        tabody.removeChild(e.target.parentNode.parentNode)
    }
}
</script>
</body>
</html>

----------------------------------简要笔记-----------------------------------
js day8, 9:
1.DOM 获取属性与设置属性：
2. JS事件:与用户发生交互的一个过程
如:鼠标点击事件 ,浏览器滚动, 键盘按下 . 去查询 DOM 零级事件.
事件绑定与取消事件
用匿名函数调用需要传参的函数

DOM的一些属性：
1.获取与设置
style获取的都是行间的样式
console.log( img.getAttributeNames( “src”)------获取内容
等同于：
console.log(img[0].getAttribute(“src”).nodName)
设置: img.setAttribute( " src","对应图片地址 ")
2.JS事件
与用户发生交互的一个过程
传统事件绑定：DOM 零级事件 -----onclick+
取消事件绑定：btn.οnclick=null
事件流：即传播事件
事件冒泡 ----IE—由内到外执行
事件捕获----DOM—内到外/外到内
注意，匿名函数相关
DOM二级事件：可绑定多个同类型事件 ,

在js 页面写函数的注释 /** */
事件对象：
匿名函数
e.target-----获取目标元素

拖拽
事件代理—委托给永远存在的元素
解决未知的由用户输入的

innerhtml intertext
this----指当前元素节点
鼠标事件
键盘事件
事件句柄
onkeydown 与 onkeyup----
onkeypress-----接收unicode码
keycode 与 charcode

dom 的阻止冒泡：stop
IE 的阻止冒泡：cancelBubble=ture

dom的阻止默认行为：
IE的阻止默认行为：
-------------------------------疑点
utf-8 与 unicode 区别？
二维数组
Dom的 0 1 2事件
事件流
浏览器标准浏览器/DOM浏览器
arguments----函数中默认的第一个参数 ?
.onclick 和 mousedown
offset-X…?
innerhtml ？
es6
耦合
clc( ) ?