web day6 笔记

事件监听

         事件：系统内放生的动作或者发生的事情

事件监听语法：

获交事件：focus

a.addEventlistener（’事件类型’,功能函数(e){

         alert(‘’) 警示框

         e.stopPropagation() 阻止事件流动

e.preventDefault() 阻止默认行为

},true/false/  )

         事件委托

         e.target 判断点击的是哪一个

        

键盘事件

事件类型 keyup

         Document.addEventlistener(‘keyup’,function(e){

                   e.key (显示对应按下的键)

                   if(e.key === ‘a’)

                            alert(‘sss’)

})

事件绑定

a.οnclick=function(){

         alert(‘’)

}

事件解绑

a.οnclick=null

        

         window事件

         window,οnlοad=function(){}当文档加载时运行脚本

        

         鼠标经过移出

项目	Value
click	单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
dblclick	双击鼠标左键时发生，如果右键也按下则不会发生
mousedown	单击任意一个鼠标按钮时发生
mouseout	鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover	鼠标指针移出某个元素到另一个元素上时发生
mouseup	松开任意一个鼠标按钮时发生
mousemove	鼠标在某个元素上时 持续 发生

      

   排他思想

         先干掉其他的，在给自己加

           let btns = document.querySelectorAll('button')

        for (let i = 0; i < btns.length; i++) {

            btns[i].addEventListener('click', function () {

                // 先干掉其他的，再给自己添加

                document.querySelector('.pink').classList.remove('pink')

                btns[i].classList.add('pink')

            })

        }

         Eventloop js执行机制

         单线程的

         同步任务：按代码顺序执行的  主线程排队执行的任务

         异步任务：定时器，ajax  进入任务队列的任务

         同步任务执行完毕之后，才会去任务队列查看有无异步任务

        

         查找节点

         son.parentNode 查找父节点

         father.children 查找儿子节点

         father.chileNode 查找儿子节点但会查找节点文本空格……

        

         追加节点

                   创建节点

                  let li = document.createElement(‘li’)

                   li里加东西

                   li.innerHTML = `daklfdsf`

                   追加节点

                  ul.appendChild(li)

        

         克隆节点

a.cloneNode(true/flase) 包含后代节点/不包含后代节点(默认)

源节点改变克隆的也变

         删除节点

                   父.Remove(子)

         三大家族

scrollTop:可读写的   不带单位

offset  家族   只读

document.documentElement

         正则表达式

                   //字面量声明

字面量创建的正则表达式不识别变量

//new

New regexp(a,’g’)

        

         Settimeout

                  setTimeout()是延时器，setInterval()是定时器。setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次，而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执行一次表达式 

         this指向

         1>独立调用，this指向window

谁调用，只想谁

    2>对象里，this指向对象，包括构造函数

3>this丢失现象

4>构造函数中，this指向new出来的对象本身   

5>call、apply、bind改变this指向

6>js事件中，this指向问题

1、直接把时间是用html属性的方式进行绑定

2、a.οnclick=function      this指向事件源           

3、事件监听   指向事件源   注意   ie的eattachevent监听事件，this指向window

7>箭头函数   lambda表达式      默认没有this。向上沿着作用域链进行查找取决于函数创建的时候

8>定时器中指向window