js事件

一、事件绑定：

onclick方式：

    /**
     * 在js中如果我们在写的事件的时候通过onclick方式的时候同一个元素在绑定相同的事件的时候，后注册的时间会被前一个事件覆盖。
     * 如果通过addEventListener注册事件的时候，不会发生覆盖情况。
     */
    var test=document.querySelector(".test");
    test.onclick=function(){
        alert(1)
    };
    test.onclick=function () {
        alert(2)
    }

 

addEventListener:

   test.addEventListener("click",function () {
        console.log(1);
    });
    test.addEventListener('click',function () {
        console.log(2);
    })

二、事件流。

js中事件流分两种：

• 冒泡事件：当子元素的事件被执行，他的父元素相同事件也依次执行。有子元素事件依次执行父元素的相同的事件。
• 捕获事件：当触发子元素的事件的时候，先执行其父元素的相同的事件，由大到小依次执行相同的事件。最后执行的是子元素。

    /**
     *
     * @type {HTMLBodyElement}addEventListener(事件类型名称,触发事件执行的函数,boolean/{})
     * 当我们第三个参数传递的是boolean的时候，表示该事件是在捕获阶段执行（true）还是捕获阶段执行（false）
     */
    var  body=document.querySelector('body');
    body.addEventListener('click',function(){
        console.log("body")
    },true);
    test.addEventListener('click',function(){
        console.log('test')
    },true)

    /**
     * addEventListener 第三参数传递对象的时候：capture：boolean true表示在捕获阶段执行 false是非捕获阶段执行
     */
    body.addEventListener('click',function(){
        console.log('body')
    },{capture:true});
    test.addEventListener('click',function(){
        console.log('test')
    },{capture:true});

默认情况下：js在执行事件的时候，是非捕获阶段执行即冒泡。

 默认事件：就是浏览器给元素提供的默认事件或者默认行为。比如a标签的点击跳转，button标签在form表单里进行提交等等。

  /**
     * 阻止默认事件： 使用事件提供的函数：event.preventDefault()来阻止浏览器提供的默认事件。
     */
    var a=document.querySelector('a');
    a.addEventListener('click',function(e){
        e.preventDefault();
        alert(22);
    });
    /**
     * addEventListener： 第三个参数可以传递once：boolean 表示改事件是否执行一次.
     */
    test.addEventListener('click',function(){
        alert('test')
    },{once:true});

 

    /**
     * addEvenetListener 第三个参数传递{passive:boolean}表示我们是否阻止默认时间发生 true:表示无法阻止默认事件发生，false表示可以阻止默认事件发生。
     */
    a.addEventListener('click',function(event){
        event.preventDefault();
        alert(2)
    },{passive:true})

• 取消事件绑定 removeEventListenter 需要注意的是绑定的函数是显示声明不能是匿名函数

<script>
    /***
     * 移除事件：removeEventListener(type,function)
     * 需要注意的是function是显示命名的函数.
     */
    var _div=document.querySelector('div');
    var button=document.querySelector('button');
    function clikFunc(){
        alert(22)
    }
    _div.addEventListener('click',clikFunc);
    button.addEventListener('click',function () {
        _div.removeEventListener('click',clikFunc);
    })

</script>

 

• 事件目标：表示触发改事件的元素。event.target：触发时间的元素。
• 事件绑定元素：event.currentTaget 事件绑定的元素。

<script>
    /**
     * 我们在绑定时间函数的时候，默认传进的形参事件对象event，该对象其中有event.target
     * event.target:表示触发事件的目标元素
     * 如下事例 由于冒泡的问题，在点击p标签的时候，会触发冒泡。此时event.target输出的p标签。
     * div点击输出的div标签。
     */
    var div=document.querySelector('div');
    var  p=document.querySelector('p');
    div.addEventListener('click',function (e) {
        console.log(e.target)
    })
</script>

   /***
     * 事件的绑定元素获取 event.currentTarget
     * 获取的绑定事件对应的元素
     * 无论点击的div还是p标签返回的都是事件绑定的元素 div
     */
    var  div=document.querySelector('div');
    var p=document.querySelector('p');
    div.addEventListener('click',function (e) {
        console.log(e.currentTarget)
    })