JS中的事件监听与事件流

事件监听:

  使用监听器(eventListener)来预定事件,在传统软件工程中称成为观察者模式

  执行某种操作时(特定的交互瞬间),会产生对象,对象会沿事件流的方向传播。

事件流:

  事件流有两种顺序,事件捕获流以及事件冒泡流
  事件捕获是从大到小,事件冒泡是从小到大。

<html>
    <body>
        <div>
            <a></a>
        </div>
    </body>
</html>

  如果你点了div,事件冒泡流的顺序就是div->body->html-document(理论上),

  事件捕获流的顺序就是document->html->body->div(注意不会传到a,因为没

  点到,如果只点击div你给a加上处理点击事件的处理程序,是不会触发a的处理程序的)

DOM2级事件

“DOM2级事件”规定的事件包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段

事件处理程序

元素上定义属性
1.直接在HTML中定义
  <a onclick="alert(‘zack‘);"></a>
2.在js中定义
  element.onclick = function(){alert("zack");};
  添加事件监听(addEventListener)
  element.addEventListener("click", function(){alert("zack"), boolean}
这些事件处理程序的定义方法都属于事件监听,将一个元素加入事件监听

element.addEventListener(),表示该元素对某个事件进行监听(订阅)

当事件发生时,该元素如果没有其他的影响,可以通过监听从事件流得到事件。

  比如为上面的a元素添加对click事件的事件监听处理程序,当click发生且能够传播到a元素时,

就会对该事件做出相应的处理,处理程序不限于作用在a元素上

事件对象

  事件对象event是一个全局对象,记录了事件发生的各种事情,当事件发生时,事件对象event会获得更新

未完待续

时间: 2025-01-02 14:45:06

JS中的事件监听与事件流的相关文章

JS 中的事件绑定、事件监听、事件委托

事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件 我们可以在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.onkeyd

[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获.IE浏览器:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发,即事件冒泡 Netscape:事件从外向里发生,事件从最不精确的对象(document)开始触发,然后到最精确对象(

JS 事件绑定、事件监听、事件委托详细介绍

事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件 我们可以在DOM元素上绑定onclick.onmouseover.onmouseout.onmousedown.onmouseup.ondblclick.onkeyd

javascript事件监听与事件委托

事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托的方式来进行事件的监听. 每个事件都经历三个阶段 捕获 到达目标 冒泡 事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件. 如下页面结构: <body> <div id="div1"> <div id="div2"

js事件监听机制(事件捕获)总结

在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,没有事件监听的机制,对于事件监听的兼容性问题是最大的难题: 1.直接把事件的方法写在页面结构上 function eventfun(){ //console.log(this); } <input type="button" onclick="eventfun()&qu

浏览器默认事件,事件监听,事件委托

浏览器的常见默认行为 图片,文字可以脱出爱 a标签可以进行跳转 右键是菜单 submit可以进行提交 右键菜单触发,可以作为一个事件 document.oncontext=function(e){ alert(1); } 可以阻止浏览器默认行为 return false;    可以实现,但不推荐使用,老师就是这么说的. 还有就是时间对象提供的方法:e.preventDefault()   或e.returnValue=false;后者为了兼容该死的IE低版本 例: DOM,一般的事件都是0级事

Vue.js中 watch(深度监听)的最易懂的解释

<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' }, watch: {

Angular.JS中使用$watch监听模型变化

$watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n

Vue.js中 watch(深度监听)的最易懂的解释[转]

https://blog.csdn.net/qq_36688143/article/details/81287535 taskData: { handler(v) { // watch 方法其实默认写的就是这个handler console.log(v); }, immediate: true, // 那我们想要一开始就让他最初绑定的时候就执行 deep: true // deep,默认值是 false,代表是否深度监听} 原文地址:https://www.cnblogs.com/webSong