javascript事件

fyber 发布于2019-08-23 18:23 / 1354人阅读

摘要：一添加移除事件级添加和移除事件方法级添加和移除事件方法好处可以添加多个点击方法按添加顺序执行添加和移除事件方法好处也可以添加多个事件但是执行顺序和添加顺序是相反的二和的区别代码代码代码返回表示该事件产生冒泡返回表示不产生冒泡说明的第三个参

一.添加移除事件

 //Dom0级添加和移除事件方法
var div = document.getElementById("box");
div.onclick = function() {
  console.log("click the div ", event, "this", this);
}
div.onclick = null;
//Dom2级添加和移除事件方法
//好处:可以添加多个点击方法,按添加顺序执行
function clickFun() {
  console.log("click the div", event);
}
div.addEventListener("click", clickFun, false);
div.removeEventListener("click", clickFun);

//ie添加和移除事件方法
//好处:也可以添加多个事件,但是执行顺序和添加顺序是相反的
div.attachEvent("onclick", clickFun)
div.detachEvent("onclick", clickFun)

二.mouseover 和mouseenter的区别

css代码:
.box,
.box2 {
  width: 100px;
  height: 200px;
  background: pink;
  border: 1px solid black;
}

.box2 {
  margin-top: 20px;
  background: brown;
  border: 1px solid yellow;
}
html代码:
mouseover
      box
      box
      box
    
    mouseenter:
      box2
      box2
      box2
 
    
 js代码:
    var box = document.getElementById("box");
    var box2 =document.getElementById("box2");
    var x = y = 0;
    box.addEventListener("mouseover", function(event) {
      console.log("x:", x += 1,event.bubbles);//event.bubbles返回true表示该事件产生冒泡
    }, false)
    box2.addEventListener("mouseenter", function(event) {
      console.log("y:", y += 1,event.bubbles);//event.bubbles返回false,表示mouseenter不产生冒泡
    }, false)

说明:addEventListener的第三个参数,这个布尔值参数如果是 true，表示在捕获
阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序

输出结果描述:鼠标每次移动到id为box的元素(和子元素)都会触发mouseover事件,而mouseenter只在移入id=box2的元素才会触发,移入子元素中不会触发mouseenter事件,由此得出:mouseover会通过事件冒泡向父元素传播mouseover事件,而mouseenter不会产生事件冒泡

云服务器 GPU云服务器 javascript事件 javascript键盘事件 javascript焦点事件 javascript事件绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105143.html

浏览器下的 Event Loop

摘要：前言是以单线程的形式运行在宿主环境下，采用了回调的形式来解决异步任务。线程中步就是在浏览器下的。前言 javascript 是以单线程的形式运行在宿主环境下，javascript 采用了回调的形式来解决异步任务。为什么是单线程？ javascript 的最开始的出现是为了给 web 页面增添一些动态的效果，那么就避免不了获取页面上的元素信息，如果 javascript 是以多线程的...

forrest23 2019-08-23 16:50 评论0 收藏0
什么是JavaScript 事件循环 ?

摘要：此事件队列的美妙之处在于它只是函数等待被调用和移动到调用栈的一个临时存放区域。在事件循环不断监视调用栈是否为空现在确实是空的时候调用创建一个新的调用栈来执行代码。在执行完之后进入了一个新的状态这个状态调用栈为空事件记录表为空事件队列也为空。这篇文章是对个人认为讲解　JavaScript　事件循环比较清楚的一篇英文文章的简单翻译,原文地址是http://altitudelabs.com...

tracymac7 2019-08-20 16:15 评论0 收藏0
JavaScript 浏览器事件解析

摘要：原文浏览器事件之间的关系程序采用了异步事件驱动编程模型，维基百科对它的解释是事件驱动程序设计英语是一种电脑程序设计模型。原文：https://keelii.github.io/2016/09/29/javascript-browser-event/ JavaScript、浏览器、事件之间的关系 JavaScript 程序采用了异步事件驱动编程（Event-driven program...

spacewander 2019-08-20 11:26 评论0 收藏0
《JavaScript高级程序设计》学习笔记：JavaScript中的事件流和事件处理程序

摘要：可以使用侦听器或处理程序来预订事件，以便事件发生时执行相应的代码。响应某个事件的函数称为事件处理程序或事件侦听器。可以删除通过级方法指定的事件处理程序。 JavaScript和HTML之间的交互是通过事件实现的。事件：文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器（或处理程序来预订事件），以便事件发生时执行相应的代码。 1. 事件流事件流：从页面中接收事件的顺序。 ...

Rocko 2019-08-19 17:21 评论0 收藏0
【译】JavaScript面试问题：事件委托和this

摘要：主题来自于的典型面试问题列表。有多种方法来处理事件委托。这种方法的缺点是父容器的侦听器可能需要检查事件来选择正确的操作，而元素本身不会是一个监听器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...

浠ラ箍 2019-08-21 10:32 评论0 收藏0
初窥JavaScript事件机制的实现（一）—— Node.js事件驱动实现概览

摘要：如果当前没有事件也没有定时器事件，则返回。相关资料关于的架构及设计思路的事件讨论了使用线程池异步运行代码。下一篇初窥事件机制的实现二中定时器的实现在浏览器中，事件作为一个极为重要的机制，给予JavaScript响应用户操作与DOM变化的能力；在Node.js中，事件驱动模型则是其高并发能力的基础。学习JavaScript也需要了解它的运行平台，为了更好的理解JavaScript的事...

lavor 2019-08-21 10:33 评论0 收藏0