JavaScript----事件（下）

1.事件的绑定方式

（1）事件属性（DOM 0级写法）

    <button class="btn" onclick="myClick()">按钮</button>
    <script>
        function myClick(){
            console.log('执行代码')
        }
    </script>

（2）绑定事件（DOM 0级写法）

    <button class="btn">按钮</button>
    <script>
        var btnEle=document.querySelector('.btn')
        //点击按钮执行函数
        btnEle.onclick=function(){
            console.log('执行代码')  
        }
    </script>

3.事件监听（DOM 2级写法）

    <button class="btn">按钮</button>
    <script>
        var btnEle=document.querySelector('.btn')
        btnEle.addEventListener('click',function(){
            console.log('执行代码')
        })
    </script>

事件监听写法与事件绑定写法的区别：

        事件绑定写法，如果给相同的事件源设置相同的事件类型，这时，后面的事件会把前面的事件给覆盖掉，而事件监听不会覆盖。

2.事件的执行机制 

（1）事件的传播

页面上任何一个元素触发事件，都会一层一层最终导致window的相同事件触发，前提是各层级元素得有注册相同的事件，不然不会触发。

（2）事件传播方向

• 事件冒泡 

从事件目标对象向外传，直到window对象。（从下向上，由内而外）

• 事件捕获 

从window对象的事件开始，到事件目标对象。（从上向下，由外而内）

实现事件冒泡或事件捕获：

        addEventListener的第三个参数决定传播方向。

        true：表示事件在捕获阶段触发

        false：事件冒泡。默认值。 

    <ul>
        <li>
            <p>
                <a href="#">按钮1</a>
            </p>
        </li>
    </ul>

    <script>
        var ul = document.querySelector('ul')
        var li = document.querySelector('li')
        var p = document.querySelector('p')
        var a = document.querySelector('a')
        a.addEventListener('click', function () {
            alert('a')
        }, false)
        p.addEventListener('click', function () {
            alert('p')
        }, false)
        li.addEventListener('click', function () {
            alert('li')
        }, false)
        ul.addEventListener('click', function () {
            alert('ul')
        }, false)
    </script>

（3）事件目标对象 target 

target 表示你点击的目标，你点击在哪个元素上，target就是那个元素。

    <a href="#">按钮1</a>
    <script>
        var aEle = document.querySelector('a')
        aEle.addEventListener('click', function (e) {
            e = e || window.event //事件对象
            var target = e.target || e.srcElement // 事件目标对象
            console.log(target)
        })
    </script>

（4）事件委托

本来由该元素处理的事件，委托给上级元素处理。 （基于事件冒泡原理）

    <ul>
        <li>小小</li>
        <li>阿发</li>
        <li>阿花</li>
    </ul>
    <script>
        // 将取包裹事件委托给ul
        var ulEle = document.querySelector('ul')
        ulEle.addEventListener('click',function(e){
            e = e || window.event //事件对象
            var target = e.target || e.srcElement //事件目标对象
             alert(`${target.innerHTML}接收包裹`)  
        })
    </script>

（5）阻止事件传播

    <ul>
        <li>
            <p>
                <a href="#">按钮1</a>
            </p>
        </li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        var li = document.querySelector('li')
        var p = document.querySelector('p')
        var a = document.querySelector('a')
        a.addEventListener('click', function () {
            alert('a')
        }, false)
        p.addEventListener('click', function (e) {
            e = e || window.event
            // e.stopPropagation() //阻止事件传播
            // 兼容性写法
            //执行完p就不会往后执行了
            e.stopPropagation? e.stopPropagation(): e.cancelBubble = true    
            alert('p')
        }, false)
        li.addEventListener('click', function () {
            alert('li')
        }, false)
        ul.addEventListener('click', function () {
            alert('ul')
        }, false)
    </script>

（6）阻止默认行为

    <form action="http://www.baidu.com">
        <input type="text" name="username">
        <button type="submit">确定</button>
    </form>
    <script>
        var formEle = document.querySelector('form')
        formEle.addEventListener('submit',function(e){
            e = e ||  window.event
            e.preventDefault() //阻止默认行为，即阻止跳转到百度页面
            console.log('表单提交')
        })
    </script>