认识事件监听
- 前面我们讲到了JavaScript脚本和浏览器之间交互时，浏览器给我们提供的BOM、DOM等一些对象模型。
- 事实上还有一种需要和浏览器经常交互的事情就是事件监听:
- 浏览器在某个时刻可能会发生一些事件，比如鼠标点击、移动、滚动、获取、失去焦点、输入内容等等一系列 的事件;
- 我们需要以某种方式(代码)来对其进行响应，进行一些事件的处理;
- Web当中，事件在浏览器窗口中被触发，并且通过绑定到某些元素上或者浏览器窗口本身，那么我们就可以 给这些元素或者window窗口来绑定事件的处理程序，来对事件进行监听。
- 如何进行事件监听呢?
- 事件监听方式一:在script中直接监听;
- 事件监听方式二:通过元素的on来监听事件;
- 事件监听方式三:通过EventTarget中的addEventListener来监听;
事件监听的三种方式
function divClick() { console.log("div元素被点击2") } const divEl = document.querySelector(".box") // DOM0 divEl.onclick = function() { console.log("div元素被点击3") } // DOM2 divEl.addEventListener("click", () => { console.log("div元素被点击4") }) divEl.addEventListener("click", () => { console.log("div元素被点击5") }) divEl.addEventListener("click", () => { console.log("div元素被点击6") })
认识事件流的由来
- 事实上对于事件有一个概念叫做事件流，为什么会产生事件流呢?
- 我们可以想到一个问题:当我们在浏览器上对着一个元素点击时，你点击的不仅仅是这个元素本身;
- 这是因为我们的HTML元素是存在父子元素叠加层级的;
- 比如一个span元素是放在div元素上的，div元素是放在body元素上的，body元素是放在html元素上的;
代码演示
<body> <div class="box"> <span class="span">我是span元素<span> </div> </body> document.body.addEventListener("click",()=>{ console.log("body被点击") }) const divEl = document.querySelector(".box") const spanEl = document.querySelector(".span") divEl.addEventListener("click",()=>{ console.log("div被点击了") }) spanEl.addEventListener("click",()=>{ console.log("span被点击了") })
我们发现点击span 打印span被点击，div被点击，body被点击 点击div 打印div被点击，body被点击
事件冒泡和事件捕获
- 我们会发现默认情况下事件是从最内层的span向外依次传递的顺序，这个顺序我们称之为事件冒泡(Event Bubble)。
- 事实上，还有另外一种监听事件流的方式就是从外层到内层(body -> span)，这种称之为事件捕获(Event Capture);
- 为什么会产生两种不同的处理流呢?
- 这是因为早期浏览器开发时，不管是IE还是Netscape公司都发现了这个问题，但是他们采用了完全相反的事件流来对事件进行了传递;
- IE采用了事件冒泡的方式，Netscape采用了事件捕获的方式;
- 那么我们如何去监听事件捕获的过程呢?
addEventListener第三个参数默认为false,表示不捕获，可以手动传入true
document.body.addEventListener("click",()=>{ console.log("body被点击") },true)
冒泡和捕获的顺序
如果我们同时有事件冒泡和时间捕获的监听，那么会优先监听到事件捕获的:
代码演示
const spanEl = document.querySelector(".span") const divEl = document.querySelector(".div") spanEl.addEventListener("click", () => { console.log("事件冒泡:span元素被点击了") }) divEl.addEventListener("click", () => { console.log("事件冒泡:div元素被点击了") }) document.body.addEventListener("click", () => { console.log("事件冒泡:body元素被点击了") }) // 再次监听 spanEl.addEventListener("click", (event) => { console.log("事件捕获:span元素被点击了") event.stopPropagation() }, true) divEl.addEventListener("click", () => { console.log("事件捕获:div元素被点击了") }, true) document.body.addEventListener("click", (event) => { console.log("事件捕获:body元素被点击了") }, true)
点击spandom 输出应该是：
事件捕获:body元素被点击了
事件捕获:div元素被点击了
事件捕获:span元素被点击了
事件冒泡:span元素被点击了
事件冒泡:span元素被点击了
事件冒泡:body元素被点击了
事件对象event
- 当一个事件发生时，就会有和这个事件相关的很多信息:
- 比如事件的类型是什么，你点击的是哪一个元素，点击的位置是哪里等等相关的信息;
- 那么这些信息会被封装到一个Event对象中;
- 该对象给我们提供了想要的一些属性，以及可以通过该对象进行某些操作;
- 常见的属性:
- type:事件的类型;
- target:当前事件发生的元素;
- currentTarget:当前处理事件的元素;
- offsetX、offsetY:点击元素的位置;
- 常见的方法:
- preventDefault:取消事件的默认行为;
- stopPropagation:阻止事件的进一步传递;
代码演示
const spanEl = document.querySelector(".span") spanEl.addEventListener("click", (event) => { console.log("span元素被点击:", event) console.log("事件的类型:", event.type) console.log("事件的元素:", event.target, event.currentTarget) console.log("事件发生的位置:", event.offsetX, event.offsetY) }) const divEl = document.querySelector(".container") divEl.addEventListener("click", (event) => { console.log("div元素被点击:", event.target, event.currentTarget) }) // 常见的方法 // preventDefault //取消事件的默认行为 ,比如a标签就是默认跳转 const aEl = document.querySelector("a") aEl.addEventListener("click", (event) => { event.preventDefault() }) // stopPropagation // 组织事件进一步传递，其实就是取消冒泡 const aEl = document.querySelector("a") aEl.addEventListener("click", (event) => { event.stopPropagation() })
