JS 里怎么去监听一个事件?
网页中每一个元素都有可以产生某些触发 JavaScript 函数的事件, 事件是可以被 JavaScript 侦测到的一种行为
监听方法的参数分别代表什么意思? 其中哪些参数关系到 JS 的事件流机制? JS 事件流机制有哪些工作? 工作原理是什么?
第一个参数是, 事件类型, 例如 onclick
第二个参数是, 响应的时候所执行的函数
第三个是事件流问题, 侦听的三个阶段, 捕获阶段 --- 目标阶段 --- 冒泡阶段
此处的参数确定侦听器是运行于捕获, 目标还是冒泡
如果将 useCapture 设置为 true, 则侦听器只在捕获阶段处理事件, 如果设置为 false, 侦听器就只在目标或者冒泡阶段处理事件
如果想要三个阶段都有侦听事件, 请调用两次 addEventListener, 一次为 true, 一次为 false
true 的顺序总在 false 之前, 如果多个为 true, 则外层触发多于内层, 如多多个为 false, 则内层触发先于外层
冒泡: 事件从里向外发生 (目前 IE6,7,8 只支持冒泡流)
捕获: 事件从外向里
false, 阻止事件继续往下流
- myBody.addEventListener("click", function() {
- show('body<br>');
- }, true); // 若为 false 则是冒泡事件
事件移除
removeEventListener(type, fn, useCapture)
因为 IE678 只支持事件冒泡, 不支持事件捕获, 所以它也不支持 addEventListener( ) 方法,
IE 提供了另一个函数 attachEvent( type , fn )
参数: type--------- 事件类型, fn------------- 事件处理函数, 没有第三个参数
事件移除 detachEvent( type , fn )
- var Event=ev||Windows.event;
- if (Event.stopPropagation){
- Event.stopPropagation();// 非 IE 阻止事件传播
- }else{
- Event.cancelBubble=true;//IE 阻止事件冒泡
- }
- var Event=ev||event;
- if (Event.preventDefault) {
- Event.preventDefault(); // 非 IE 阻止默认事件
- } else{
- Event.returnValue=false; //IE 阻止默认事件
- };
事件委托
定义: 利用事件冒泡, 只指定一个事件处理程序
好处: 1, 节省空间内存性能好, 2, 对于新增的内容, 无需再进行事件绑定, 对于动态内容尤为合适
缺点: 如果把所有事件都用事件代理, 可能会出现事件误判. 即本不该被触发的事件被绑定上了事件.
- <body>
- <div id="box">
- <button val="add"> 添加 </button>
- <button val="del"> 删除 </button>
- <button val="select"> 选择 </button>
- </div>
- </body>
- <script>
- var box=document.getElementById("box");
- box.onclick=function (ev) {
- var ev=ev||Windows.event;
- var target=ev.target||ev.srcElement;
- if (target.nodeName.toLocaleLowerCase()=='button'){
- var attVal=target.getAttribute('val');
- switch(attVal){
- case'add':console.log('添加');break;
- case'del':console.log('删除');break;
- case'select':console.log('选择');break;
- }
- }
- }
- </script>
来源: http://www.bubuko.com/infodetail-3021538.html