js事件监听

(1)注册事件监听
语法:addEventlistener(event, function, useCapture)
作用:事件侦听注册
兼容问题: 支持IE9以上版本
语法翻译:

语法	意思
add	添加
Event	事件
Listener	监听者

语法参数:
event：事件类型，是字符串形式，去掉on
function():事件处理程序,里面传入要处理得事件
useCapture:useCapture参数成为可选参数（对于Chrome，IE和Safari始终为可选参数）,当参数为true，执行捕获阶段，先执行document->html-body->…
当参数为false或什么都不写,执行冒泡阶段，先执行body->html->document
参数为true 演示代码:

//捕获阶段
<div id="da1">大盒子
        <div id="da2">小盒子</div>
    </div>
    <script>
        var da2 = document.querySelector('#da2');
        da2.addEventListener('click', function() {
            alert('小盒子');
        }, true)
        var da1 = document.querySelector('#da1');
        da1.addEventListener('click', function() {
            alert('大盒子');
        }, true);
    </script>

参数为false 演示代码:

//冒泡排序 参数为false 或不填写参数
var da1 = document.querySelector('#da1');
        var da2 = document.querySelector('#da2');
        da1.addEventListener('click', function() {
            alert('大盒子');
        }, false)
        da2.addEventListener('click', function() {
            alert('小盒子');
        }, false)
        document.addEventListener('click', function() {
            alert('文档');
        });

演示代码:

	<button>按钮</button>
	//1.获取事件源
	var btn= document.querySelector('button');
	//2.注册事件
	btn.addEventListener('click',function() {
		alert('123');
	});
	//3.第二次按钮被点击弹出一个对话框
	btn.addEventListener('onclick',function() {
		alert('Hello world');
	})
	输出结果: //弹出了两次对话框
			alert('123');
			alert('Hello world');
			//传统注册事件只能一次，而addEventListener可以给一个事件处理多个事件程序	

(2)attachEvent(event, function)监听事件
语法:attachEvent(event, function)
作用:事件监听注册
缺点:非标准得方法,最好不要使用，只支持IE9以下浏览器，其他浏览器不支持
优点:attachEvent在IE9以下的版本中受到支持,大于IE9版本不支持.
语法翻译:

语法	意思
attach	附加