JavaScript中阶 事件

事件驱动三要素

1、事件源：绑定事件的元素

2、事件类型：被JS监测到的行为

3、事件处理函数：记录事件发生时要进行的操作（事件句柄或者事件监听器），根据DOM级别不同，写法和功能也有所区别

事件添加监听器

1、DOM0级HTML事件监听器

2、标准DOM0级事件监听器

兼容性好，但是一个事件源只能绑定一个事件，若有两个，后面会覆盖前面

<input type="button" id='btn'/>
<script>
        btn.onclick=function(){}
</script>

3、DOM2级事件监听级addEventListener('type', callback, boolean)

类型没有关键字on

参数 boolean（可选） 默认false 冒泡

可以同一元素添加多个同类型事件

<input type="button" id='btn'/>
<script>
        btn.addEventListener('click', function() {}, false)
</script>
​
<script>
function foo() {}
        btn.addEventListener('click', foo, false)
</script>
​

事件删除监听器

1、删除DOM0级监听器

将节点对象的事件处理属性赋值为null

<input type="button" id='btn' value='点击'/>
<script>
        btn.onclick=null
</script>

2、删除DOM2级监听器

需要把事件单独写，保障新增和删除的参数一样，才会删除掉

<input type="button" id='btn'/>
​
<script>
function foo() {}
        btn.addEventListener('click', foo, false);//添加
        btn.removeEventListener('click', foo, false);//删除
</script>

​
​
这样新增和删除的就不是同一个函数，所以删除不了

<script>
        btn.addEventListener('click', function foo() {}, false);//添加
        btn.removeEventListener('click',function foo() {}, false);//删除
</script>
​

事件分类-window事件（ul事件）

事件分类-鼠标事件 HTML onclick 事件属性 | 菜鸟教程

事件分类-键盘事件

键盘事件只能绑定在特定元素上

1、输入框

2、document

3、设置属性为<div contenteditable></div>或<div tabindex='1'>的元素

顺序：down-press-up

事件流

事件在页面上的传播顺序

DOM事件流、冒泡流（常用）和捕获流

IE 冒泡型事件流：由里到外，直到触发document或window的事件后停止

网景 捕获型事件流：由外到里，直到触发中心元素的事件后停止

阻止冒泡：event.stopPropagation()

阻止捕获：event.stopImmediatePropagation()

祖先和后代的事件类型相同，一般情况下点击后，会一次触发外面的父元素事件，如果只触发一次本身，祖先元素不触发，需要在当前需要的事件上阻止冒泡。

事件流的设置

1、DOM0级事件监听方式只支持冒泡

2、DOM2级事件监听方式可以通过设置addEventListener('type', callback, boolean)的第三个参数控制

false：默认值，冒泡型事件流

true：捕获型事件流

事件对象event

获取事件对象

现代浏览器、IE9+：通过事件处理函数的形参得到event对象

<input type="button" id='btn' value='点击'/>
<script>
        btn.onclick=function(event){
        log(event);
        }
</script>

事件目标 event.target

用于捕获触发事件的目标元素

   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
<script>
 let ul = document.querySelector('ul');
        ul.onclick = function(event) {
            console.log(event.targer); //具体触发事件的目标元素
        }
<script

事件目标 this

指代事件源，绑定该事件的标签元素

  <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        let ul = document.querySelector('ul');
        ul.onclick = function(event) {
            console.log(this); //ul标签
        }
    </script>

鼠标事件