js事件监听

  通过添加事件监听进一步实现业务处理。可以对同一个元素添加相同的事件监听,执行会从上到下的原则,也可以添加多个事件监听针对同一元素。

针对元素监听:

 document.getElementById("idName").addEventListener("eventType",functionName);//注意:前面不加on 如click事件

针对window对象监听:

window.addEventListener(“resize”,function(){ aler(“窗体变大或者变小”);});//通过resize这个事件触发监听如切换浏览器窗口的百分比或者最大化最小化的变换。

监听中实现参数传递:

document.getElementById("idName").addEventListener("click",function(){ var x=5; functionName(x);}) function  functionName(a){alert(a);};

事件冒泡:

事件冒泡主要是指有2个元素a和b都有监听事件,a元素包含b元素如a元素是div.b元素是span.通过给他们设置监听事件click,当你点击div时,没有点到span标记的范围。此时就会触发div的监听事件,当你点击span标记的时候此时就会触发span标记的监听事件,接着再触发div监听事件。也就是从内到外的事件监听触发过程。

document.getElementById("idName").addEventListener("click",function(){ alert("测试");},false);//默认情况是冒泡传递

事件捕抓:

事件捕抓跟事件冒泡正好相反。是从外到内的监听事件触发的过程

document.getElementById("idName").addEventListener("click",function(){ alert("测试");},true);//捕抓传递

监听事件的移除:

以上都是通过addEventListener('eventType',functionName)添加监听事件,移除已经产生的监听事件用removeEventListener('eventType',functionName);

注意:针对Opera 7.0,IE8及以前的低版本不支持addEventListener()和removeListener()。解决办法是用attachEvent()和detachEvent()代替添加和删除;

通过判断if(element.addEventListener){ //使用addEventListener() }else if(element.attachEvent){ //使用attachEvent()}

 

posted @ 2015-08-06 01:36  objnet  阅读(2521)  评论(0编辑  收藏  举报