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>