首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

前端基础-事件

第2章 事件 2.1 什么是事件 一种 触发—响应 的机制; 用户的行为 + 浏览器感知(捕获)到用户的行为 + 事件处理程序 事件三要素: 事件源:()触发事件元素 事件类型:事件触发方式...” 的缺点是,同一元素同一个事件只能定义一个监听函数,也就是说,如果定义两次onclick属性,后一次定义会覆盖一次。...事件名称 何时触发 mouseenter 指针移到有事件监听的元素内 mouseover 指针移到有事件监听的元素或者它的子元素内 mousemove 指针元素内移动时持续触发 mousedown...元素上按下任意鼠标按钮 mouseup 元素上释放任意鼠标按键 click 元素上按下并释放任意鼠标按键 dblclick 元素上双击鼠标按钮 contextmenu 右键点击 (右键菜单显示...当点击div1时,触发 事件1,但是,紧跟着,事件2和事件3也触发了; 这种现象,我们称为 事件冒泡 JS中当一个事件发生以后,它会在不同的DOM节点之间传播。

1.3K10

jQuery源码解析之trigger()

; triggerHandler(xxx) 不会引起事件(比如表单提交)的默认行为 (2)trigger(xxx) 触发所有匹配元素的指定事件; triggerHandler(xxx) 只触发第一个匹配元素的指定事件...dataPriv.get( cur, "handle" ); /*让冒泡元素执行handle,这行代码是触发冒泡机制的关键*/ /*执行click事件的处理程序后,自然就会执行...one点击了和body点击了 $("#one").trigger('click') ① 上面这段代码会先执行$("#one").trigger('click...(3)原生js绑定的事件的执行,如onclick $("#one").click(function(e){ console.log('one点击了') }) document.getElementById...("one").onclick=function(){ console.log('onclick点击了') } 还是while循环中: //接下来处理原生的事件及处理程序

2.5K20

HTML事件属性--DOM

} 打印和打印后的事件方法类似,一个是在打印触发事件,一个是在打印这个事件结束之后触发onafterprint这个事件 demo查看 2.onbeforeunload/unload...,但系统按钮,箭头和功能无法识别 3.onkeyup 松开任何之前按下的键盘时触发 demo查看 四、mouse鼠标事件 利用鼠标触发事件 1.onclick 鼠标点击元素触发事件 <p onclick...} demo查看 3.拖动事件 ondrag/ 元素拖动时触发事件 ondragstart/拖动操作开端运行的脚本 ondrop/ 当元素正在被拖动时触发事件 ondragend...4.onmousedown/onmouseup 当元素按下鼠标时触发事件/鼠标释放时触发事件 一个是按下去的瞬间就触发 一个是当鼠标松开的时候触发 onmouseup效果和onclick一样,因为...click也是点击过后触发 这两个事件加起来相当于一个click事件,但是并不能用这两个事件来做点击事件的效果 demo查看 5.onmousemove 当鼠标移动到元素上时触发 相当于css里面的 :

3.7K20

JavaScript 学习-30.HTML DOM0级事件和 DOM2级事件

# 前言 DOM0 级事件就是 html 元素添加onclick 属性,或者给元素添加onclick事件,但是同元素的同一事件只能绑定一个函数,否则后面的事件会覆盖前面的事件。...DOM0 级事件 DOM0 级事件就是前面讲到的事件绑定有2种方式,HTML 中 或在 Script 中绑定事件 页面元素onclick="" scrip 中给元素添加onclick属性 绑定事件...事件传递定义了元素事件触发的顺序。 如果你将 元素插入到 元素中,用户点击 元素, 哪个元素的 "click" 事件触发呢?... 捕获阶段 中,外部元素事件会先触发,然后才会触发内部元素事件,即: 元素点击事件触发 ,然后再触发 元素点击事件。... 冒泡阶段 中,内部元素事件会先触发,然后再触发外部元素,即: 元素点击事件触发,然后会触发 元素点击事件

98710

js定义点击事件_回字四种写法

触发了按钮的 onclick()事件 btnObj.onclick()只是简单地调用了btnObj的onclick所指向的方法,只是调用方法而已,并未直接触发事件 W3C事件写法 添加事件:appEventListener...事件冒泡或事件捕获 事件传递有两种方式:冒泡与捕获。 事件传递定义了元素事件触发的顺序。...如果你将 元素插入到 元素中,用户点击 元素, 哪个元素的 “click” 事件触发呢?... 冒泡 中,内部元素事件会先触发,然后再触发外部元素,即: 元素点击事件触发,然后会触发 元素点击事件。... 捕获 中,外部元素事件会先触发,然后才会触发内部元素事件,即: 元素点击事件触发 ,然后再触发 元素点击事件

4.3K30

前端day16-JS(WebApi)学习笔记(事件补充、事件冒泡与捕获)

跟容器相关的拖拽事件 ondragenter:有元素 拖拽到 元素范围内就触发 ondragleave:有元素 拖离 元素范围内就触发 ondragover:鼠标移动时,元素我的范围内就会触发...("click", test,false); btn.removeEventListener("click",test,false) 03-事件冒泡 事件冒泡:如果一个元素事件触发,那么他的所有父级元素的同名事件也会被依次触发...("文档点击了"); } document.documentElement.onclick = function () { alert("html点击了");...阻止事件冒泡:让同名事件不要在父元素中冒泡(触发) * 说人话:点击一个元素只会触发当前元素事件,不会触发元素的同名事件 语法: 事件对象.stopPropagation() IE8及之前不支持...("文档点击了"); } document.documentElement.onclick = function () { alert("html点击了");

1.7K00

HTML DOM - 事件

如需在用户点击某个元素时执行代码,请把 JavaScript 代码添加到 HTML 事件属性中: onclick=JavaScript HTML 事件的例子: 当用户点击鼠标时 当网页已加载时 当图片已加载时...当鼠标移动到元素上时 当输入字段改变时 当 HTML 表单被提交时 当用户触发按键时 本例中,当用户点击时,会改变 元素的内容: 实例 <h1 onclick="this.innerHTML...实例 向 button 元素分配一个 onclick 事件: 点我 在上面的例子中,当点击按钮时,会执行名为 displayDate...当按钮点击时,将执行函数。 ---- onload 和 onunload 事件 当用户进入或离开页面时,会触发 onload 和 onunload 事件。...事件可用于鼠标指针移动到或离开元素触发函数。

2K30

深入JavaScript之BOM、DOM和事件

来获取和创建 方法 Node:节点对象,其他5个的父对象 特点:所有dom对象都可以认为是一个节点 方法 属性 HTML DOM 事件监听机制 概念 常见的事件 点击事件 焦点事件 加载事件 鼠标事件...常见的事件 点击事件 onclick:单击事件 ondblclick:双击事件 焦点事件 onblur:失去焦点 onfocus:元素获得焦点。 加载事件 onload:一张页面或一幅图像完成加载。...选择和改变 onchange 域的内容改变。 onselect 文本被选中。 表单事件 onsubmit 确认按钮点击。 onreset 重置按钮点击。...事件简单学习 功能: 某些组件被执行了某些操作后,触发某些代码的执行。 造句: xxxxxx,我就xxx 我方水晶摧毁后,我就责备对友。 敌方水晶摧毁后,我就夸奖自己。...如何绑定事件 直接在html标签上,指定事件的属性(操作),属性值就是js代码 事件onclick— 单击事件 通过js获取元素对象,指定事件属性,设置一个函数 代码: <img

2.9K30

「Web编程API」- 01

事件基础 1.4.1. 事件概述 JavaScript 使我们有能力创建动态页面,而事件是可以 JavaScript 侦测到的行为。 简单理解: 触发---响应机制。...网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个 事件,然后去执行某些操作。 1.4.2....事件三要素 事件源(谁):触发事件元素 事件类型(什么事件): 例如 click 点击事件 事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数 案例代码 <button...事件是有三部分组成 事件事件类型 事件处理程序 我们也称为事件三要素 //(1) 事件事件触发的对象 谁 按钮 var btn = document.getElementById...('btn'); //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下 //(3) 事件处理程序 通过一个函数赋值的方式

64050

事件

如果上述showMessage方法页面最底部定义,而用户页面解析点击了按钮,会引发错误。 (2)其作用域链不同浏览器中会导致不同结果。...事件 说明 blur 元素失去焦点时触发,不会冒泡 focus 元素获得焦点时触发,不会冒泡 focusin 元素获得焦点时触发,会冒泡 focusout 元素失去焦点时触发,会冒泡 当焦点从页面中的一个元素移动到另一个元素...;这个事件不冒泡,而且鼠标移动到后代元素上不会触发;DOM3纳入标准; mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发;这个事件不冒泡,而且鼠标移动到后代元素上不会触发;DOM3...纳入标准; mousemove 鼠标指针元素内部移动时重复地触发; mouseout 鼠标指针位于一个元素上方,然后用户将其移入另一个元素触发。...DOMNodeRemovedFromDocument 一个节点直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件DOMNodeRemove之后触发

3.2K51

节流函数和防抖函数的注意事项

n秒内函数只会执行一次,如果n秒内高频事件再次触发,则重新计算时间 思路 每次触发事件时都取消之前的延时调用方法 html代码: ?...=debounce(sayHi); // 防抖 节流 高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率 思路: 每次触发事件时都判断当前是否有等待执行的延时函数 html如防抖 js代码...=debounce(sayHi); // 节流 这样写当然没有什么问题,这也是这两个函数的标准写法,但是博主第一次测试这两个函数时用的是直接在DOM元素上绑定事件的方法,下面以防抖函数为例说明: html...明明是按照标准写的呀,只是换了事件绑定方式,为啥没有效果,后来反复验证发现, 发现了问题所在: 原来是html中的debounce(sayHi)()事件每次点击都会运行一次,导致每次的储存定时器id的timeout...解决方法: 如果直接用DOM元素绑定事件,需要把timeout变量赋值放到debounce函数的外面,这样每次点击运行函数时不会对定时器id进行赋值,也就不会清除不了定时器了。

70930

点击块,让小块动起来 - 函数封装

; 4 mousemove - 当鼠标指针元素内部移动时重复地触发; 5 mouseenter - 鼠标光标从元素外部首次移动到元素范围之内时触发; 6 mouseleave - 在位于元素上方的鼠标光标移动到元素范围之外时触发...; 页面事件 1 load - 当页面完全加载后(包括所有图像、JavaScript文件、CSS文件等外部资源),就会触发window上面的load事件; 2 unload - 文档完全卸载后触发。...只要用户从一个页面切换到另外一个页面,就会触发unload事件; 3 resize - 当浏览器的窗口大小改变时触发事件; 4 scroll - 浏览器的滚动条位置发生变化时触发事件; 表单事件...1 blur - 当前元素失去焦点时触发事件; 2 change - 当前元素失去焦点并且元素的内容发生改变而触发事件; 3 focus - 当某个元素获得焦点时触发事件; 4 input - 当用户输入时触发...; 5 reset - 事件会在表单中的重置按钮点击时发生; 2.3 给标签绑定事件 了解完了JS的事件类型,那我们在网页中该如何使用这些事件类型呢?

1.6K120
领券