js 事件对象相关笔记

事件对象

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

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

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

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

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

 1 <div class="div">123</div>
 2     <script>
 3         var div = document.querySelector(".div")
 4         div.onclick = function (event) {
 5             console.log(event);
 6         }
 7         div.addEventListener('click', function (event) {
 8             console.log(event);
 9         })
10     </script>

重点

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

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

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

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

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

 1 <div class="box">www</div>
 2     <ul>
 3         <li>abc1</li>
 4         <li>abc2</li>
 5         <li>abc3</li>
 6     </ul>
 7     <a href="http://www.baidu.com">百度</a>
 8     <form action="http://www.baidu.com">
 9         <input type="submit" value="提交" name="sub">
10     </form>

 1  var box = document.querySelector(".box")
 2         var ul = document.querySelector("ul")
 3         box.addEventListener('click', function (e) {
 4             console.log(e.target);
 5         })
 6         ul.addEventListener('click', function (event) {
 7             console.log(event.target)
 8             console.log(event.type);
 9             // this指向的是谁绑定的事件
10             console.log(this);
11         })
12         // 阻止默认行为  让链接不跳转或者让添加按钮不添加
13         var a = document.querySelector("a")
14         a.addEventListener('click', function (eve) {
15             eve.preventDefault() //DOM标准写法
16         })

 1     <div class="father">
 2         <div class="son">son</div>
 3     </div>
 4     <script>
 5         var son = document.querySelector(".son")
 6         son.addEventListener('click', function (e) {
 7             alert("00")
 8             e.stopPropagation()
 9         }, false)
10         var father = document.querySelector(".father")
11         father.addEventListener('click', function () {
12             alert("father")
13         }, false)
14         document.addEventListener('click', function () {
15             alert("987")
16         })
17     </script>

事件委托

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

事件委托的原理

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

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

 1  <ul class="ul">
 2         <li>12345</li>
 3         <li>12345</li>
 4         <li>12345</li>
 5         <li>12345</li>
 6         <li>12345</li>
 7     </ul>
 8     <script>
 9         // 事件委托的核心原理 给父节点设置监听器  然后事件冒泡影响下面的子节点
10         var ul = document.querySelector(".ul")
11         ul.addEventListener('click', function (e) {
12             // alert("0000-")
13             e.target.style.backgroundColor = 'pink'
14         })
15     </script>

来源：https://www.cnblogs.com/xf2764/p/12652292.html

标签

event

father