• home > webfront > SGML > xml >

    再谈BOM和DOM(4):DOM0/DOM2事件处理分析

    Author:zhoulujun Date:

    事件就是用户或浏览器自身执行的某种动作。响应某个事件的函数就叫事件监听器,户产生的事件(比如鼠标点击)只要指定过回调函数,这些事件发生时就会进入 "任务队列 ",等待主线程读

    JavaScript能够让网站对用户的各种操作及时做出“反馈”,响应用户交互行为,而这些就是:DOM,事件以及事件处理

    事件处理程序

    事件就是用户或浏览器自身执行的某种动作。比如click,mouseup,keydown,mouseover等都是事件的名字。

    响应某个事件的函数就叫事件处理程序(事件监听器),事件处理程序以on开头,因此click的事件处理程序就是onclick 或addEventListener

    JavaScript事件队列

    javascript除了主线程,还有一个任务队列的东西,主线程执行完毕了,就去队列找任务,当然我们不点击的话,任务队列就是空的,当我们点击了,addEventLister就会把他的第二个参数的函数放到队列里,然后javaScript主线程突然发现队列里有东西了,就赶紧出栈 出来执行

    "任务队列"是一个事件的队列(也可以理解成消息的队列),IO设备完成一项任务,就在"任务队列"中添加一个事件,表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列",就是读取里面有哪些事件。

    "任务队列"中的事件,除了IO设备的事件以外,还包括一些用户产生的事件(比如鼠标点击、页面滚动等等)。只要指定过回调函数,这些事件发生时就会进入"任务队列",等待主线程读取。

    所谓"回调函数"(callback),就是那些会被主线程挂起来的代码。异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的回调函数。

    任务队列

    只要主线程空了,就会去读取"任务队列",这就是JavaScript的运行机制。这个过程会不断重复。

    JavaScript事件处理,就是UI有了操作,就吧相应事件丢到JavaScript执行栈里面。UI交互与JavaScript执行不在同一个线程里面。

    比如我们修改DOM,修改dom的操作是JavaScript代码是同步执行的,但是浏览器重排和重绘是异步进行的。

    DOM 0级事件监听

    DOM 0级事件监听:把一个函数赋值给一个事件的处理程序属性

    var btn2=document.getElementById('btn2');//获得btn2按钮对象
    btn2.onclick=function(){}//给btn2添加onclick属性,属性又触发了一个事件处理程序

    事件冒泡与事件捕获

    • IE中采用的事件流是事件冒泡,先从具体的接收元素,然后逐步向上传播到不具体的元素。

    • Netscapte采用事件捕获,先由不具体的元素接收事件,最具体的节点最后才接收到事件。

    事件冒泡示意图事件捕获示意图

    在dom时代,兼容了二者

    DOM事件流

    如何阻止冒泡?

    阻止冒泡有以下方法:

    • e.cancelBubble=true;

    • e.stopPropagation();

    • return false;


    为什么没有DOM 1 事件

    DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容,所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ,这个标准下的事件模型就是我们所说的2级DOM事件模型 

    DOM 2级事件处理程序

    DOM 2级事件定义了两个方法,用于指定和删除事件处理程序的操作。addEventListener()和removeEventListener()

    addEventListener()和removeEventListener()

    在DOM中,addEventListener()和removeEventListener()用来分配和移除事件处理函数,与IE不同的是,这些方法需要三个参数:

    • 事件名称(如click)

    • 要分配的函数(第一个参数Event 对象代表事件的状态)

    • 处理函数是用于冒泡阶段(false)还是捕获阶段(true),默认为冒泡阶段false  

    [object].addEventListener("name_of_event",fnhander,bcapture)  

    [object].removeEventListener("name_of_event",fnhander,bcapture)  

    oDiv.addEventListener("onclick", fnClick, false);  //添加事件处理函数 
    oDiv.addEventListener("onclick", fnClickAnother, false);  // 与IE一样,可以添加多个事件处理函数 
    oDiv.removeEventListener("onclick", fnClick, false);  //移除事件处理函数

    如果使用addEventListener()将事件处理函数加入到捕获阶段,则必须在removeEventListener()中指明是捕获阶段,才能正确地将这个事件处理函数删除  

    oDiv.onclick = fnClick;  
    oDiv.onclick = fnClickAnother;  //使用直接赋值,后续的事件处理函数会覆盖前面的处理函数  oDiv.onclick = fnClick; 
    oDiv.addEventListener("onclick", fnClickAnother, false);  //会按顺序进行调用,不会覆盖



    window对象方法

    35a73e84ffb3739262e378a38fb2f62b_articlex.jpeg


    参考文章:

    JavaScript 运行机制详解:再谈Event Loop www.ruanyifeng.com/blog/2014/10/event-loop.html

    JS-------DOM0级事件处理和DOM2级事件处理-------简单记法 https://www.cnblogs.com/holyson/p/3914406.html

    ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)https://www.cnblogs.com/best/p/8028168.html

    JavaScript学习总结(三)BOM和DOM详解 https://segmentfault.com/a/1190000000654274



    转载本站文章《再谈BOM和DOM(4):DOM0/DOM2事件处理分析》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0609_8453.html