事件监督
在中,事件监视是一种用于对特定操作做出反应的方法。比如听一个按钮,或者当鼠标左键被按下时得到鼠标的位置。这一切都需要通过倾听来完成。倾听的作用很简单:
这里是解释一个网页的嵌套关系:最外层:include:include:html include:div等等.
预察法
收听事件响应的按钮
首先,我们需要一个按钮。得到它的方法很简单。代码如下:
=document . getelementbyid(' btnesample ');
然后添加事件监听btn:
btn.addEventListener('click ',btn_click_function,false);
现在,当我们点击id为btn的按钮时,就会触发btn_click_function函数。这个函数可以是匿名回调函数(不了解请百度一下),也可以是自己写的函数,在这里调用。这里,所有这些函数都传递一个事件参数。这个参数有很多属性,涉及到第事件监听传递参数热门博客列表三个参数,也就是false,我们后面会讨论。
我将举例说明这两种方法:
1.匿名回调函数
1 VarExportBtn=document . GetElementBYid(' CreateImageData ');
23 exportbtn . addevent listener(' click ',function(){
4//writefunctioncodehere5},false);
2.命名你自己的回调函数
1 VarExportBtn=document . GetElementBYid(' CreateImageData ');
2 exportbtn . addeventlistener(' click ',createImageDataPressed,false);
窗口事件响应
窗口事件响应意味着我们监控整个窗口,不局限于按钮和输入框。
您只需要将上面的btn更改为窗口或文档。
addEventListener的参数分析
addevent listener(type : string,listener:Function,useCaputer:Boolean布尔值(default:false),
priority:int(default:0),useWeakReference:boolean布尔值(default : false));
前三个参数在addEventListener中很重要,第一个参数是事件类型,比如click或者pressdownpressup,第二个参数是响应时要执行的函数,第三个是事件流的问题。第四是优先级,第五是强引用或弱引用。如果是强引用,就不会作为垃圾回收。
第一个已经做完了,第二个参数前面已经举例了,这里强调第三个参数:(内容比较多,我先放百度的解释)
这里涉及到“事件流”的概念。听者在听的时候有三个阶段:捕捉阶段、目标阶段和冒泡阶段。顺序如下:捕获阶段(根节点到子节点检查是否调用监听功能)目标阶段(目标本身)冒泡阶段(目标本身到根节点)。这里的参数决定了侦听器是在捕获阶段、目标阶段还是冒泡阶段运行。如果useCapture设置为true,侦听器将只处理捕获阶段的事件,而不处理目标或冒泡阶段的事件。如果useCapture为false,侦听器只处理目标或冒泡阶段的事件。要在所有三个阶段监听事件,请调用addEventListener两次,一次将useCapture设置为true,第二次将useCapture设置为false。
捕捉阶段是第一部分提到的网页嵌套关系中从外到内的传递过程,冒泡阶段是从目标到最外层的传递过程。此参数告知何时触发监控事件。
示例:
1 ivid=' outdiv ' 2 ivid=' middle div ' 3 ivid=' indiv '请单击此处鼠标。/div 4/div 5/div 67 divid=' info '/div 8910 varoutdiv=document . GetElementbyID(' outDiv ');
11 varmiddlediv=document . getelementbyid(' middleDiv ');
12 Varindiv=document . GetElementbyID(' Indiv ');
13 varinfo=document . GetElementbyID(' info ');
1415 outDiv . addevent listener(' click ',function(){ info . innerhtml=' outDiv ' ' br },false);
16 middle div . addevent listener(' click ',function(){ info . innerhtml=' middle div ' ' br },false);
17 inDiv . addevent listener(' click ',function(){ info . innerhtml=' inDiv ' ' br },false);
以上是我们测试的代码。触发顺序根据信息的显示来确定。有三个addEventListener,useCapture的可选值为true和false,所以2*2*2可以得到8个不同的程序。
当全部为假时,触发顺序为inDiv、middleDiv、outDiv;
当全部为真时,触发顺序为:outDiv、middleDiv、inDiv;
OutDiv为真;当其他为假时,触发序列为outDiv、inDiv和middleDiv;
当middleDiv为真,其他为假时,触发顺序为:middleDiv,inDiv,outDiv;
……
最后,得出以下结论:
真总是在假之前触发;
如果multiple为true,则外层的触发器先于内层的触发器。
如果multiple为false,则内层的触发先于外层的触发。
js 事件绑定、事件监听、事件委托详细介绍
使用事件来侦听绑定事件
绑定事件的另一种方法是用()或()绑定事件侦听器函数。以下细节,事件监控。
事件监督
关于事件监控,W3C定义了三个事件阶段,依次是捕获阶段、目标阶段和冒泡阶段。
首先,建立了一套事件驱动机制(即事件捕获)。然后IE也推出了自己的一套事件驱动机制(即事件冒泡)。最后,W3C标准化了两种事件机制,分为捕获阶段、目标阶段和冒泡阶段。IE8之前IE一直坚持自己的事件机制(前端人员一直头疼的兼容性问题),IE9之后IE也支持W3C规范。
W3C规范
语法:
(,)
(必选)事件名称,支持所有DOM事件。
函数:(必选)指定事件触发时要执行的函数。
UseCapture:(可选)指定事件是在捕获阶段还是冒泡阶段执行。没错,捕捉。假的,冒泡。默认值为false。
注意:IE8以下不支持。
input type=' button ' value=' click me ' id=' BTN 1 '
脚本
document.getElementById('btn1 ')。addEventListener('click ',hello);
functionhello(){
alert('helloworld!');
{}
/script
版权声明:内容来源于互联网和用户投稿 如有侵权请联系删除
标签: #事件监听传递参数热门博客列表