JS中的事件监听

1、简单事件（重复事件会被覆盖）

var box = document.getElementById( "box" );box.onclick = function () {    alert( "你是谁" );};box.onclick = function () {    alert( "你管我是谁，要覆盖你" );};输出：//你管我是谁，要覆盖你

2、添加事件监听

非IE浏览器：（第三个参数为true时，事件捕获时触发）

var btn = document.getElementById( "btn" );btn.addEventListener( "click", fun);btn.addEventListener( "click", function(){    console.log("今天天气不错2");} );btn.addEventListener( "click", function () {    console.log( "今天天气不错3" );});btn.removeEventListener( "click", fun );//事件移除，写函数名称，不写匿名函数输出：//今天天气不错2输出：//今天天气不错3

IE浏览器

var btn = document.getElementById( "btn" );btn.attachEvent( "onclick", function () {    console.log( "今天天气不错1" );});btn.attachEvent( "onclick", fun );btn.attachEvent( "onclick", function () {    console.log( "今天天气不错3" );});btn.detachEvent( "onclick", fun );//移除事件，参数必须与设置时完全一致输出：//今天天气不错2输出：//今天天气不错3

3、事件委托（给父元素设置事件）

box.onclick = function ( e ) {    var e = e || event; //e是事件对象    //console.log(this);//this指向事件源，无法得出真正触发事件的元素    var tar = e.target || e.srcElement;//真正触发事件的元素    if ( tar.nodeName.toLowerCase() == "p" ) {        console.log( "我是p标签" );    } else if ( tar.nodeName.toLowerCase() == "span" ) {        console.log( "我是span标签" );    } else if ( tar.className == "topbar" ) {        console.log( "我的类名为：topbar" );    }};

4、阻止事件冒泡

普通浏览器： e.stopPropagation();IE浏览器： window.event.cancelBubble = true;取消默认效果： e.preventDefault();