事件冒泡(event bubbling) 事件冒泡是指一个元素上的事件被触发,然后这个事件按嵌套顺序在父级元素上触发,直至document根节点。 例如:<!DOCTYPE html><html><head><title>Event Bubbling Example</title></head><body><div id="myDiv">Click Me</div></body></html>如果单击了页面中的<div>元素,那么事件会按以下顺序传播: <div> --> <body> --> <html> --> document 也就是说,click 事件首先在<div>元素上发生...
事件1)事件是文档或浏览器窗口中发生的特定的交互瞬间。JavaScript和HTML之间的交互是通过事件实现的。2)事件流——描述的是从页面中接受事件的顺序IE——事件冒泡流Netscape——事件捕获流3)事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的哪个节点)接收,然后逐级向上传播至最不具体的哪个节点(文档)。click事件在input触发,它会一级一级往上冒,直到冒到document上点击按钮不但触发了按钮,也触发了div、bo...
一、事件处理函数概述 JavaScript 可以处理的事件类型为:鼠标事件、键盘事件、HTML 事件。 所有的事件处理函数都会都有两个部分组成,on + 事件名称,例如 click 事件的事件处理函数就是:onclick。 对于每一个事件,它都有自己的触发范围和方式,如果超出了触发范围和方式,事件处理将失效。 二、鼠标事件:页面所有元素都可触发 1、click:当用户单击鼠标按钮或按下回车键时触发。<script type="text/javascript">...
js的touch事件,一般用于移动端的触屏滑动代码如下:$(function(){ document.addEventListener("touchmove", _touch, false);}) function _touch(event){alert(1);}event对象touchstart:当手指触摸屏幕时触发;即使已经有一个手指放在了屏幕上也会触发。 touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间,调用preventDefault()可阻止滚动。 touchend:当手指从屏幕上移开时触发。 touchcancel:当系统停止跟踪触摸时...
事件在什么时候执行什么事事件的三要素- 事件源:触发事件的元素- 事件类型:事件的触发方式- 事件处理程序:事件触发后要执行的代码例如:事件名说明onclick鼠标单击ondblclick鼠标双击onkeyup按下并释放键盘上的一个键时触发onchange文本内容或下拉菜单中的选项发生改变onfocus获得焦点,表示文本框等获得鼠标光标。onblur失去焦点,表示文本框等失去鼠标光标。onmouseover鼠标悬停,即鼠标停留在图片等的上方onmouseout鼠标移出...
什么是JS事件流 早期的IE事件传播方向为由上至下,即从document逐级向下传播到目标元素;而Netscape公司的Netscape Navigator则是朝相反的方向传播,也就是从目标元素开始向上逐级传播最终至window。 后来ECMAScript在DOM2中对事件流进行了进一步规范,基本上就是上述二者的结合。当事件发生时,最先得到通知的是window,然后是document,由上至下逐级依次而入,直到真正触发事件的那个元素(目标元素)为止,这个过程就是捕获...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{padding: 50px;}#div1{background: blue;}#div2{background: brown;}#div3{background: orange;}</style><script>window.onload =function () {var oDiv = document.getElementsByTagName(‘div‘);...
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现。但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法:1、利用位移的方法来实现 首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说。将图片放入到div 中。 其次,样式部分将img标签全部设置成absolute;以方便定位 ...
//获取当前选择的值<select id="sltLB" name="sltLB" onchange=‘btnChange(this[selectedIndex].value);‘> <option value="1" selected="selected">全校</option> <option value="2">教师</option> <option value="3">学生</option> </select> //下拉框选择改变事件 function btnChange(values) { //如果选中的是学生,显示第二个下拉框 ...
<html> <title></title> <head><meta charset="utf-8"><style type="text/css">.divone{width:100px;height:100px;background:black;position: relative;cursor: pointer}.divchild{position: absolute;margin:10px;width:50px;height:50px;background:white;cursor: pointer}</style><script type="text/javascript">function divone(){ //这里是divone事件的代码 console.log(‘divone事件‘);stopPropagation();} function divc...
***************************几个概念***************************************1.事件源事件发生的来源,按钮、文本框等2.事件名称onclick、onchange、onfocus等通常事件以on开头3.事件处理函数发生事件以后 调用的函数叫做事件处理函数(也叫做事件监听器)4. 事件对象即对事件的一个具体的描述, 键盘按下事件,如果想获得用户到底按了哪个键,可以通过事件对象来获取***************************常用事件****************************...
if ("createEvent" in document) {var evt = document.createEvent("HTMLEvents");evt.initEvent("change", false, true);element.dispatchEvent(evt); } elseelement.fireEvent("onchange");google出来的 版权声明:本文为博主原创文章,未经博主允许不得转载。原文:http://blog.csdn.net/ksr12333/article/details/47447893
原文:http://www.cnblogs.com/wuyaxing/p/6429945.html
??事件的对象 JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给我们的开发提供更多的强大功能。最方便和强大的就是事件对象了,它们可以帮你处理鼠标和键盘方面的很多事情,此外我们还可以修改一般事件的捕获或者冒泡流的函数。1.事件对象事件处理函数的一个标准特性是以某些方式访问的事件对象包含有关于当前事件的上下文信息。事件处理三部分组成:对象.事件处理函数=函数。例如:单击文档任意处。除了用匿名函...
JavaScript有一个基于事件循环的并发模型,事件循环负责执行代码,收集和处理事件以及执行队列中的子任务。 并发模型与事件循环(Concurrency model and Event loop) 包含对 栈 堆 队列的理解运行时(runtime)概念可视化描述Frame 帧;Stack 栈;Heap 堆;Queue 队列栈函数调用形成了一个由若干帧组成的栈,比如:function foo(b) {let a = 10 ;return a + b + 11; }function bar(x) {let y = 3 ;return foo(x * y); }console.log(...