DOM学习

事件监听

给dom元素添加事件两种方式

1 事件源.on事件动作 = 事件处理程序 这种目前比较少使用

<script>
        const btn = document.querySelector('button')

        //  事件源.on事件动作=事件处理程序
        btn.onclick = function () {
            alert('快吃饭咯')
        }
    </script>

2 dom元素.addEventLister('事件动作',事件处理程序)

 <script>
        // 事件源.addEventListener('事件类型', 要执行的函数)
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            alert('让你点你就点? 还使那么大的劲儿')
        })
    </script>

事件对象:即为要执行操作的dom元素

环境对象:顾名思义,即为程序在执行时所处的环境 ,对于函数来说内部错在this,需要搞清楚this的指向问题 ,后面会对this进行统一的归纳 在目前阶段需要记得以方法的形式存在时 谁调用 this指向谁.

回调函数:将函数作为实参传递给另外一个函数 此时作为参数的函数就叫做回调函数

常见的事件:

DOM事件模型

1.事件捕获:以点击事件为例,同类型事件会由根-->目标的祖元素-->目标的父元素-->目标元素

2.事件冒泡:跟事件捕获完全相反,事件冒泡是从内到外依次触发

事件捕获跟事件冒泡都有事件传播阶段,传播阶段就是从事件到触发开始到结束的过程,两个优先级为:事件捕获>事件冒泡

两者的来源:W3C推行DOM2级事件之前网景和IE在打架,网景使用的方式是捕获,IE使用的事件方式为事件冒泡

事件冒泡:在一个对象上触发事件,这个事件会向这个对象的父级对象传播,从内到外,直至他被处理(父级对象所有同类事件都将激活),或者他到达了对象层次的最高级,即document对象

阻止事件冒泡: 

1 w3c方法是:event.stopPropagation() ,在事件处理程序中,会阻止事件冒泡,但是不会阻止事件默认行为

2 IE使用的 event.cancelBubble=true 阻止事件冒泡

3 returnfalse;jq里面事件处理程序过程中,阻止事件冒泡,也阻止了事件的默认行为