js 事件对象相关笔记

    事件对象

    event就是一个事件对象 写到我们的监听函数的括号里面 当形参来看

    事件对象只有有了事件才存在，他是系统给我们自动创建的 不需要我们传递参数

    事件对象是我们事件的一系列相关数据的集合 跟事件相关比如鼠标点击就包含了鼠标的相关信息等等

    事件对象我们可以自己定义比如event,eve,e

    事件对象也有兼容性问题 I E6,7,8通过window.event,兼容性的写法e = e || window.wvwnt

<div class="div">123</div>
    <script>
        var div = document.querySelector(".div")
        div.onclick = function (event) {
            console.log(event);
        }
        div.addEventListener('click', function (event) {
            console.log(event);
        })
    </script>

 

    重点

    常用的事件对象的属性和方法

    e.target 返回触发事件的对象 标准

    e.srcElement 返回触发事件的对象 非标准

    e.type 返回事件的类型 比如click mouseover 不带on

    e.stopPropagation() 阻止冒泡 有兼容性问题

<div class="box">www</div>
    <ul>
        <li>abc1</li>
        <li>abc2</li>
        <li>abc3</li>
    </ul>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>

 var box = document.querySelector(".box")
        var ul = document.querySelector("ul")
        box.addEventListener('click', function (e) {
            console.log(e.target);
        })
        ul.addEventListener('click', function (event) {
            console.log(event.target)
            console.log(event.type);
            // this指向的是谁绑定的事件
            console.log(this);
        })
        // 阻止默认行为  让链接不跳转或者让添加按钮不添加
        var a = document.querySelector("a")
        a.addEventListener('click', function (eve) {
            eve.preventDefault() //DOM标准写法
        })

<!-- 阻止冒泡 -->

    <div class="father">
        <div class="son">son</div>
    </div>
    <script>
        var son = document.querySelector(".son")
        son.addEventListener('click', function (e) {
            alert("00")
            e.stopPropagation()
        }, false)
        var father = document.querySelector(".father")
        father.addEventListener('click', function () {
            alert("father")
        }, false)
        document.addEventListener('click', function () {
            alert("987")
        })
    </script>

 

 

    事件委托

    事件代理,在jQuery里面叫事件委派

    事件委托的原理

    表示给每个字节点单独设置事件监听,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点

    只操作了一次DOM操作 提高程序的性能

 <ul class="ul">
        <li>12345</li>
        <li>12345</li>
        <li>12345</li>
        <li>12345</li>
        <li>12345</li>
    </ul>
    <script>
        // 事件委托的核心原理 给父节点设置监听器  然后事件冒泡影响下面的子节点
        var ul = document.querySelector(".ul")
        ul.addEventListener('click', function (e) {
            // alert("0000-")
            e.target.style.backgroundColor = 'pink'
        })
    </script>