js事件监听

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

针对元素监听:测试

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

针对window对象监听:对象

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

监听中实现参数传递:element

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

事件冒泡:get

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

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

事件捕抓:

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

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()}

相关文章
相关标签/搜索