DOM操作与事件处理-CSDN博客

本文链接：https://blog.csdn.net/desolate_sad/article/details/120495017

// 1.删除节点

// 语法：父节点.removeChild(删除的节点)

// var ul = document.querySelector('ul')

// ul.removeChild(ul.children[0])

// 2.复制节点

// 语法：节点.cloneNode(true)//深拷贝节点.cloneNode(false)、节点.cloneNode() //浅拷贝

// 区别：深拷贝会复制当前节点及所有子节点，浅拷贝只会复制当前节点

// var lili = ul.children[0].cloneNode(true)

// ul.appendChild(lili)

// 注意点：不要在for循环里面使用innerHTML

// 事件监听：

// 语法：事件源.addEventListener('事件类型(不带on)',处理程序)

// ul.children[0].addEventListener('click',fn)

// function fn(){

// alert(11)

// }

// 注意：他和传统注册事件的区别是他可以给同一个元素注册多个事件，传统注册事件如果给同一元素绑定多个事件会出现层叠

// 移除事件(解绑事件,删除事件)

// 语法：事件源.removeEventListener('事件类型',要解绑的事件)

// ul.children[0].removeEventListener('click',fn)

// DOM流：分为捕获-当前-冒泡 3个阶段

// addEventListener(参数1，参数2，参数3)

// 如果参数3为true，代表给元素绑定了捕获事件

// 如果参数3为false或者不写，代表给元素绑定了冒泡事件

// 我们实际开发更关注的是冒泡事件

// 事件对象：事件在发生时候的一些列数据的集合

// 只要发生了事件就一定有事件对象，事件对象是系统帮我们创建的，我们只需要使用就行

// 使用步骤：1.先定义一个形参。2.使用形参

// ul.children[0].addEventListener('click', fn)

// function fn(e) {

// console.log(e);

// e.target代表的是当前触发事件的对象

// this是当前绑定事件的对象

// alert(11)

// }

// var a = document.querySelector('a')

// a.οnclick=function(e){

// a.style.color='red'

// // 阻止默认行为

// e.preventDefault()

// return false //只能在传统事件中使用

// }

// ul.addEventListener('click', function (e) {

// // 事件委托：不给子元素单独绑定事件，而是把事件绑定到父元素上，然后通过冒泡来实现每一个子元素的事件

// e.target.style.backgroundColor='red'

// })

// var lis = document.querySelectorAll('li')

// for (var i = 0; i < lis.length; i++) {

// lis[i].addEventListener('click', function (e) {

// // 阻止事件冒泡

// e.stopPropagation()

// })

// }

// 了解：

// 禁止选中

// document.addEventListener('selectStart',function(e){ e.preventDefault() }

// 禁止右键菜单

// document.addEventListener('contextmenu',function(e){ e.preventDefault() )

// 核心原理：绑定事件，阻止默认行为

// 2种事件绑定方式
    var div = document.querySelector('div')
    // 第一种是传统方式 事件源.事件类型=处理程序  eg:div.onclick=function(){console.log(1)}
    // 第二种是事件监听 事件源.addEventListener('事件类型','处理程序','是否为捕获阶段发生(可选参数，默认是false)')
    // eg:给div绑定点击事件,注意，事件类型没有on了
    // div.addEventListener('click',function(){
    //     console.log(1);
    // })
    // div.addEventListener('click',function(){
    //     console.log(2);
    // })
    // 最终会打印1，2
    // 区别传统方式：可以绑定多个事件，每次触发事件的时候都会将绑定的事件执行一次
    // 2中事件解绑方式
    // 第一种是传统方式：只需要将事件赋值成null  eg:  div.onclick= null  这就代表点击的时候什么都不做，也就是取消
    // 第二种是事件监听：事件源.removeEventListener('事件类型','函数名')
    // 注意，要想给监听事件解绑，绑定的事件必须是通过命名函数绑定的
    // start---------------------->
    // 举个命名函数绑定的例子,注意函数不要调用,eg:
    // div.addEventListener('click',fn)
    // function fn(){
    //     console.log(1);
    // }
    // 以上代码可以通过预解析来理解：
    // function fn(){
    //     console.log(1);
    // }
    // // 就等价于
    // var fn = function(){
    //     console.log(1);
    // }
    // 并且提升到代码最前面执行
    // div.addEventListener('click',fn)
    // 所以fn  就是 function() {
    //     console.log(1);
    // }
    // 就相当于把fn替换成了匿名函数
    // 解绑方式,eg：
    // div.removeEventListener('click',fn)
    // end---------------------->
    // DOM事件流：分为3个步骤
    // 1.捕获阶段
    // 解释：当事件触发的时候，事件会从文档开始向被触发事件的元素逐级向下查找事件，这个过程叫做捕获
    // 2.当前阶段
    // 解释：事件触发的元素被查找到的阶段，就是当前阶段
    // 3.冒泡阶段
    // 解释：当事件经历了捕获，和当前阶段，还会从内往外的查找一次，这样的过程叫做冒泡
    // 验证：
    // son.addEventListener('click',function(){
    //     console.log('我是son冒泡');
    // })
    // son.addEventListener('click',function(){
    //     console.log('我是son捕获');
    // },true)
    // father.addEventListener('click',function(){
    //     console.log('我是father冒泡');
    // })
    // father.addEventListener('click',function(){
    //     console.log('我是father捕获');
    // },true)
    // 执行顺序应该是先打印1.我是father捕获2.我是son捕获3.我是son冒泡4.我是father冒泡
    // 事件对象
    // 事件只要发生，系统就会帮我们产生一个事件对象，我们只要使用就行了
    // 用法：在处理程序的函数中，接收一个形参来使用，默认命名为event,e。eg:
    // div.onclick=function(e){
    //     console.log(e);//e就是事件对象
    // }
    // 阻止默认行为：e.preventDefault()
    // 能阻止a标签跳转，form表单提交等系统默认行为，但是不会阻止后面的代码运行，比如阻止跳转了还可以改a标签的颜色
    // 阻止冒泡： e.stopPropagation()
    // 能防止事件向父元素扩散，比如我只想点击son，不想触发father的绑定事件
    // 事件委托：就是不用循环绑定事件了，给父元素委托事件，通过冒泡来实现效果
    // 优点：更少的操作DOM，可以提升效率
    // ul>li*4 ：以前要给li绑定事件是通过循环，这里只需要绑定到ul就行
    // 通过e.target可以找到事件触发的对象
    // 通过this可以找到事件绑定的对象
    // 鼠标移动事件：onmousemove
    // 鼠标移动时会触发，频率比较高，移动1PX都会触发
    // 鼠标移动过程中，也会有事件对象，我们通常使用以下属性
    // document.addEventListener('mousemove',function(e){
    // 这三个位置都是数字类型的
    //     // 距离浏览器的位置
    //     e.clientX
    //     e.clientY
    //     // 距离页面的位置(使用频率最高)
    //     e.pageX
    //     e.pageY
    //     // 距离显示器(屏幕)的位置
    //     e.screenX
    //     e.screenY
    // })
    // 跟随鼠标的天使：
    // 思路：就是给document绑定鼠标移动事件，然后移动的过程中，将鼠标的位置赋值给图片就可以了
    // 坑点：1一定要给图片给定位2.记得位置加px
    // 因为图片是从左上角开始，没有居中，所以还得减去图片的宽高各一半，来实现让鼠标在图片上居中
    // 键盘事件：
    // 有三类事件1.键盘按下 keydown  2.键盘按下 keypress   3.键盘抬起  keyup 
    // 区别：1.keypress不认识功能键    2.keypress认识大小写
    // 键盘事件对象：当按下键盘的时候也会产生事件对象，我们通常用事件对象中的keyCode属性
    // keyCode属性会返回对应案件的ASCII码，我们要想判断按键的话，可以先打印一下keyCode，在用这个值判断
    // start---------------------------->
    // 模拟京东快递单案例
    // 要素:1.div展示放大的单号2.输入框，用来输入内容
    // 思路：
    // 1.输入内容的时候，让div进行展示
    // 2.清空内容的时候，让div进行隐藏
    // 3.输入框失去焦点的时候，让div进行隐藏
    // 4.输入框获取焦点的时候，判断一下输入框是否有内容，有就展示
    // 代码：
    // 1.var con =  document.querySelector('div')
    // 2.var inp =  document.querySelector('input')
    // 3.给输入框绑定键盘事件
    // input.onkeyup=function(){
    // 4.如果没有值就隐藏
    // if(this.value ===''){
    //  con.style.display = 'none';
    // }
    // 5.如果有值就展示并且赋值
    // else{
    //  con.style.display = 'block';
    //  con.innerHTML=this.value
    // }
    // }   
    // 6.输入框绑定失去焦点事件 
    // inp.addEventListener('blur',function(){
    //     con.style.display='none'
    // })
    // // 7.输入框绑定聚焦事件 
    // inp.addEventListener('focus',function(){
    //     // 8.判断一下输入框是否有内容
    //     if(this.value.length!=""){
    //         con.style.display='block'
    //     }
    // })