DOM事件

1.事件流

事件冒泡:最具体的元素往上传递

事件捕获:不具体的元素更早收到传递,再到具体元素


2.事件处理程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <button id="btn1" onclick="showMes()">按钮1</button>
        <button id="btn2">按钮2</button>
        <button id='btn3'>按钮3</button>
    </div>
</body>

    <script type="text/javascript">

 //html事件流
 function showMes(){
            alert('hello btn1');
 }

        //DOM0级事件流
 var btn2 = document.getElementById('btn2');
 btn2.onclick = function(){
            alert('hello btn2');
 };
 //   btn2.onclick()=null;//取消事件

        //DOM2级事件流 3个参数,第一个为方法名称,去掉on.第三个为bool(true为捕获事件,false为冒泡事件)
 var btn3 = document.getElementById('btn3');
 btn3.addEventListener('click',function(){
            alert('hello btn3');
 },false);
//        btn3.addEventListener('click',showMes,false);
//        btn3.removeEventListener('click',showMes,false);

 var eventUtil = {
            //添加句柄  参数:对象 方法类型 方法名称
 addHandler:function (element,type,handle) {
                if (element.addEventListener){
                    element.addEventListener(type,handle,false);
 }else  if (element.attachEvent){    // IE事件流,不支持DOM2
 element.attachEvent('on'+type,handle);
 }else {
                    element['on'+type] = handle; //点语法等同于[]
 }
            }
        };

 eventUtil.addHandler(btn2,'click',showMes);


 </script>
</html>


3.事件对象

1>.DOM中的事件对象

DOM事件_第1张图片

btn2.onclick = function(){
    alert(event.type);
    alert(event.target);
    alert(event.target.nodeName);
    event.stopPropagation();
    event.preventDefault();

};

2>IE中的的事件对象

DOM事件_第2张图片

你可能感兴趣的:(DOM事件)