UI(User Interface，用户界面)事件，当用户与页面上的元素交互时触发 焦点事件，当元素获得或失去焦点时触发 鼠标事件，当用户通过鼠标在页面上执行操作时触发 滚轮事件，当使用鼠标滚轮(或类似设备...JavaScript 错误时在 window 上面触发，当无法加载图像时在 img 元素上面触发 scroll: 当用户滚动带滚动条的元素中的内容时，在该元素上面触发 resize: 当窗口或框架的大小变化时在...在用户双击主鼠标按钮(一般是左边的按钮)时触发 mousedown: 在用户按下了任意鼠标按钮时触发 mouseup: 在用户释放鼠标按钮时触发 mouseenter: 在鼠标光标从元素外部首次移动到元素范围之内时触发...mouseleave: 在位于元素上方的鼠标光标移动到元素范围之外时触发 mousemove: 当鼠标指针在元素内部移动时重复地触发 mouseout: 在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发...mouseover: 在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发 注意: 只有在同一个元素上相继触发 mousedown 和 mouseup 事件，才会触发 click
onhashchange: 当窗口的锚点哈希值发生变化时触发。 鼠标相关 onclick: 当点击页面时触发。 onmouseup: 鼠标按键被松开时触发。...DOM事件 鼠标相关 onclick: 当用户点击某个对象时调用的事件句柄。...onmouseenter: 当鼠标指针移动到元素上时触发。 onmouseleave: 当鼠标指针移出元素时触发 onmousemove: 鼠标被移动。...onmouseover: 鼠标移到某元素之上。 onmouseout: 鼠标从某元素移开。 onmouseup: 鼠标按键被松开。 onwheel: 该事件在鼠标滚轮在元素上下滚动时触发。...ontimeupdate: 事件在当前的播放位置发送改变时触发。 onvolumechange: 事件在音量发生改变时触发。 onwaiting: 事件在视频由于要播放下一帧而需要缓冲时触发。
第2章 事件 2.1 什么是事件 一种 触发—响应 的机制； 用户的行为 + 浏览器感知（捕获）到用户的行为 + 事件处理程序 事件三要素： 事件源:(被)触发事件的元素 事件类型:事件的触发方式...(例如鼠标点击或键盘点击) 事件处理程序:事件触发后要执行的代码(函数形式) 2.2 事件绑定 行内方式绑定(元素属性) <input type="button" value="按钮...事件名称 何时<em>触发</em> mouseenter <em>指针</em>移到有事件监听<em>的</em><em>元素</em>内 mouseover <em>指针</em>移到有事件监听<em>的</em><em>元素</em>或者它<em>的</em>子<em>元素</em>内 mousemove <em>指针</em>在<em>元素</em>内移动时持续<em>触发</em> mousedown...在<em>元素</em>上按下任意<em>鼠标</em>按钮 mouseup 在<em>元素</em>上释放任意<em>鼠标</em>按键 click 在<em>元素</em>上按下并释放任意<em>鼠标</em>按键 dblclick 在<em>元素</em>上双击<em>鼠标</em>按钮 contextmenu 右键点击 (右键菜单显示前...). mouseleave <em>指针</em>移出<em>元素</em>范围外（不冒泡） mouseout <em>指针</em>移出<em>元素</em>，或者移到它<em>的</em>子<em>元素</em>上 select 文本被选中（input标签、textarea标签） copy <em>元素</em>内容被拷贝时
事件概述 JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。 简单理解： 触发--- 响应机制。 ...网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。 1.2....事件三要素 事件源（谁）：触发事件的元素 事件类型（什么事件）： 例如 click 点击事件 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数 案例代码 <body...('btn'); //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下 //(3) 事件处理程序 通过一个函数赋值的方式...常见的鼠标事件
鼠标与滚轮事件 click 点击主鼠标按钮或者按下回车按键的时候触发。...只有在一个元素上相继发生mousedown,mouseup事件，才会触发click事件 dblclick 双击主鼠标按钮时触发.只有在一个元素上相继触发两次click时间才会触发dbclick事件 mousedown...任意鼠标按钮按下时触发 mouseup 释放鼠标按钮触发 mousemove 鼠标在元素内部移动的时候重发触发 mousewheel 滚轮事件 mouseover 鼠标位于元素外部，将其首次移入另一个元素边界之内时触发...【支持子元素】在被选元素上与mouseleave效果相同 mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发，不冒泡【不支持子元素】 4....相关元素,event特殊属性 1.客户区坐标位置 clientX,clientY 事件发生时，鼠标指针在视口中的水平和垂直坐标 2.页面坐标位置 pageX,pageY 事件发生时，鼠标指针在页面本身而非视口的坐标
，因为在HTML中无法访问window元素。...；这个事件不冒泡，而且在鼠标移动到后代元素上不会触发；DOM3被纳入标准； mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发；这个事件不冒泡，而且在鼠标移动到后代元素上不会触发；DOM3...被纳入标准； mousemove 鼠标指针在元素内部移动时重复地触发； mouseout 鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。...移入的另一个元素可能位于元素外部，也可能使其子元素。 mouseover 鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。 mouseup 用户释放鼠标按钮时触发。...pageX和pageY：鼠标指针在页面中的位置。在没有滚动条的情况下，同clientX和clientY的值。 screenX和screenY：鼠标指针相对于整个屏幕的坐标信息。 ?
事件概述 JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。 简单理解： 触发--- 响应机制。...网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。 2....事件三要素 事件源（谁）：触发事件的元素 事件类型（什么事件）： 例如 click 点击事件 事件处理程序（做啥）：事件触发后要执行的代码(函数形式)，事件处理函数 案例代码 <body...('btn'); //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下 //(3) 事件处理程序 通过一个函数赋值的方式...常见的鼠标事件 ? 5. 分析事件三要素 下拉菜单三要素 关闭广告三要素
一. onmouseenter、onmouseover onmouseenter 事件在鼠标指针进入到绑定事件的那个元素上时触发。...该事件通常与 onmouseleave（在鼠标指针离开绑定事件的那个元素上时触发） 事件一同使用。 onmouseenter 事件类似于 onmouseover 事件。... onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)（冒泡）。...事件中有在鼠标指针进入 div 元素时触发，鼠标进入p、span元素内不会触发，因为不支持事件冒泡； 3. onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和...事件冒泡 比如说父元素添加了onclick事件，当子元素发生onclick事件时，父元素的onclick事件也会触发。 四.
2、id属性 用于指定元素的唯一id 要注意该属性的值在整个HTML文档中要具有唯一性 3、style属性 用于指定元素的行内样式 使用该属性后将会覆盖任何全局的样式设定 4、title属性 用于指定元素的额外信息...2、Form表单事件 onblur：当元素失去焦点时触发。 onchange：在元素的元素值被改变时触发。 onfocus：当元素获得焦点时触发。 ...4、Mouse鼠标事件 onclick：当在元素上发生鼠标点击时触发。 onblclick：当在元素上发生鼠标双击时触发。 ...onmousedown：当在元素上按下鼠标按钮时触发。 onmousemove：当鼠标指针移动到元素上时触发。 onmouseout：当鼠标指针移出元素时触发。 ...onmouseover：当鼠标指针移动到元素上时触发。 onmouseup：当在元素上释放鼠标按钮时触发。 5、Media媒体事件 onabort：当退出时触发。
clientX 返回当事件被触发时，鼠标指针的水平坐标。 clientY 返回当事件被触发时，鼠标指针的垂直坐标。 ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。...metaKey 返回当事件被触发时，"meta" 键是否被按下。 relatedTarget 返回与事件的目标节点相关的节点。 screenX 返回当某个事件被触发时，鼠标指针的水平坐标。...screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。 shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。...鼠标事件 属性 描述 DOM onclick 当用户点击某个对象时调用的事件句柄。...2 onmouseenter 当鼠标指针移动到元素上时触发。 2 onmouseleave 当鼠标指针移出元素时触发 2 onmousemove 鼠标被移动。
这两个都是对元素的一个操作，简单讲，innerHTML可以在某种特定环境下重构某个元素节点的DOM结构，innerText只能修改文本值。...JS常见事件 Js事件就是我们的行为能被侦测到，且触发相应的函数（函数里面写上事件的行为） 1. onmouseover ⿏标被移到某元素之上 2. onmouseout ⿏标从某元素上⾯移开...console.log("鼠标移出") } //onchange 元素值改变，⼀般⽤在表单元素上 document.getElementById("xd...，获取到焦点就是当你把鼠标放进输入框，之后点击一下，鼠标变成一条竖线之后输入的那种。... 操作div的任意样式 先获取到div元素，再通过事件的触发来改变div的样式 <!
，而不是普通的冒泡，并且没有捕获阶段；只有在鼠标指针穿过被选元素时，才会触发。...onMouseOut onMouseOver事件：不论鼠标指针穿过被选元素或其子元素，都会触发。...e.stopPropagation() console.log("原生事件绑定事件触发") } 由于DOM事件被阻止冒泡了，无法到达document，所以合成事件自然不会被触发...，则打印出： 子元素原生事件绑定事件触发 父组件原生事件绑定事件触发 在子元素React合成事件onClick中阻止事件传播，则打印出： 子元素原生事件绑定事件触发 父组件原生事件绑定事件触发...子元素React合成事件绑定事件触发 在父元素React合成事件onClick中阻止事件传播，则打印出： 子元素原生事件绑定事件触发 父组件原生事件绑定事件触发 子元素React合成事件绑定事件触发
2、鼠标事件 //鼠标指针移动到元素时触发 //鼠标指针移出时触发...十、 使用标签 text //元素上点击鼠标时触发 text... //元素上按下鼠标时触发 text //在元素上释放鼠标时触发 十一、 使用标签 text //元素上按下鼠标时触发 text //在元素上释放鼠标时触发 十二、XSS编码绕过 1、html实体编码(10进制与...如果数字不够，在前面补零，如a的编码为\u0061 对于一些控制字符，使用特殊的C类型的转义风格，如\n和\r 3、url编码: 如把尖括号编码[ url: %22 4、base64
如果JavaScript关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄。事件是某个行为或者触发，比如点击、鼠标移动........当用户点击鼠标时 当网页已加载时 当图像已加载时 当鼠标移动到元素上时 当用户触发按键时......事件流 事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先触发click事件还是外层先触发？...来删除，也就是说通过addEventListener添加的匿名函数将无法被删除。...（onclick，onload） 事件处理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的触发元素，而attachEvent事件处理程序会在全局变量内运行，this
捕获阶段：浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。...冒泡阶段:浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它。然后它移动到下一个直接的祖先元素，并做同样的事情，直到它到达元素。...2.2 事件触发机制 以事件处理程序属性形式关联事件处理器 //onclick、onmouseover document.querySelector('html').onclick = function...onclick、onmouseover关联事件侦听器代码 事件监听属性 描述 onmouseover 鼠标移入事件 onmouseout 鼠标移出事件 onclick 鼠标单击事件 ondblClick...//在鼠标指针移到指定的元素后执行Javascript代码： 鼠标指针移动到这。
4.事件类型： 4.1鼠标事件：当用户通过鼠标在页面操作时触发； click事件：在用户单击鼠标按钮或者按下回车键触发； dblclick事件：在用户双击鼠标按钮时被触发； mouseover...事件：鼠标指针在元素外部，用户将移入另一个元素的边界时触发，感觉和mouseenter事件类似； mouseout事件：用户将其移入另一个元素内被触发。...mouseenter事件：在鼠标光标从元素外部移动到元素范围之内被触发；这个事件不冒泡； mouseleave事件：在鼠标光标从元素内部移动到元素范围之外被触发；这个事件不冒泡； mousemove事件...：当鼠标指针在元素内部移动时重复地触发。...mouseup事件：用户释放鼠标按钮时触发； 页面上所有的元素都支持鼠标事件，除了mouseenter和mouseleave，所有鼠标事件都会冒泡，也可以被取消，而取消鼠标事件将会影响浏览器的默认行为
如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中： onclick=JavaScript HTML 事件的例子： 当用户点击鼠标时 当网页已加载时 当图片已加载时...当鼠标移动到元素上时 当输入字段被改变时 当 HTML 表单被提交时 当用户触发按键时 在本例中，当用户点击时，会改变 元素的内容： 实例 <h1 onclick="this.innerHTML...实例 向 button 元素分配一个 onclick 事件： 点我 在上面的例子中，当点击按钮时，会执行名为 displayDate...("myBtn").onclick=function(){displayDate()}; 在上面的例子中，名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。...text" id="fname" onchange="upperCase()"> onmouseover 和 onmouseout 事件 onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数
input.onclick = box;//把函数名赋值给事件处理函数 四．事件处理函数 JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。...1.鼠标事件，页面所有元素都可触发 click：当用户单击鼠标按钮或按下回车键时触发。...input.onclick = function () { alert('Lee'); }; dblclick：当用户双击主鼠标按钮时触发。...input.onmouseup = function () { alert('Lee'); }; mouseover：当鼠标移到某个元素上方时触发。...input.onmouseout = function () { alert('Lee'); }; mousemove：当鼠标指针在元素上移动时触发。
id属性 用于指定元素的唯一id 注意该属性的值在整个HTML文档中具有唯一性 style属性 用于指定元素的行为样式 使用该属性后将会覆盖任何全局的样式设定 title属性 用于指定元素的额外信息...onblur当元素失去焦点时触发 onchange在元素的元素值被改变时触发 onfocus当元素获得焦点时触发 onreset当表单中的重置按钮被点击时触发 onselect在元素中文本被选中后触发...该属性不会对所有按键生效，不生效的有，alt,ctrl,shift,esc onkeyup当用户释放按键时触发 mouse鼠标事件 onclick当元素上发生鼠标点击时触发 onblclick当元素上发生鼠标双击时触发...onmousedown当元素上按下鼠标按钮时触发 onmousemove当鼠标指针移动到元素上时触发 onmouseout当鼠标指针移出元素时触发 onmouseover当鼠标指针移动到元素上时触发...onmouseup当在元素上释放鼠标按钮时触发 media媒体事件 onabort当退出时触发 onwaiting当媒体已停止播放但打算继续播放时触发。
创建数组 使用数组之前要先创建一个数组，并将数组赋值个一个变量。...事件是可以被JavaScript侦测到的行为，网页中的每个元素都可以产生某些触发JavaScript函数或程序的事件。...主要事件表： 事件 说明 onclick 鼠标单击事件 onmouseover 鼠标经过事件 onmouseout 鼠标移开事件 onchange 文本框内容改变事件 onselect 文本框内容被选中事件...onfocus 光标聚集 onblur 光标离开 onload 网页导入 onunload 关闭网页 鼠标单击事件(onclick) onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件...鼠标经过事件(onmouseover) 鼠标经过事件：当鼠标移动到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
