发表于： 2021-08-13 23:08:16

0 2056

今天完成的事情：
学习了事件方法，并进行总结

event.target

返回哪个 DOM 元素触发了事件

event.type

返回哪种事件类型被触发

event.pageX 和 event.pageY

鼠标位置

event.preventDefault()

阻止事件的默认行为

event.stopPropagation() 

阻止向上冒泡

event.which

返回指定事件上哪个键盘键或鼠标按钮被按下

event.currentTarget 

在事件冒泡阶段内的当前 DOM 元素


其中event.target，在运用时，比如html代码


<ul>
  <li>苹果</li>
  <li>梨子</li>
  <li>桃子</li>
  <li>香蕉</li>
</ul>


如果需要点击li元素来触发点击事件，需要分别给li都绑定点击事件，这样一来就很繁琐了。可以给父元素绑定，点击li元素，会向上传导，触发点击事件，很方便简捷


加上jq代码

$("ul").click(function(event){
    alert(event.target.textContent)
})


点击效果如下图



还有一个重点是事件冒泡，当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 

这里以代码的方式来举个例子，比如

<div>这里是div元素
  <p>这里是p元素,在div当中
    <span>这里是span元素，在div和p当中</span>
  </p>
</div>


jq代码如下

$("span").click(function(){
    alert("span元素被点击");
});

$("p").click(function(){
    alert("p元素被点击");
});

$("div").click(function(){
    alert("div元素被点击");
});



最后在点击的时候，会发现点击span元素，会依次由span元素，p元素，div元素弹窗

这个就是事件冒泡了，如果想打断冒泡，可以给添加event.preventDefault()，会对冒泡进行阻止




明天计划的事情：
计划预习js5

继续总结jq相关基础




遇到的问题：
效率低，东西理解起来慢





收获：

事件方法理解加深了






上一篇
返回列表 返回列表
下一篇
现在开始，找个师兄带你入门
评论

    分享到

    技能树  |  IT修真院

    关于我们 ｜ 联系我们 ｜ 合作公司

    移动端下载

    友情链接

    短信验证码     

    微信公众平台

    Copyright © 2015 北京葡萄藤信息技术有限公司 All Rights Reserved | 京ICP备15035574号-1