6.javascript的事件

javascript中的事件

前端的层级:button-->div-->body-->-->html-->documentElement

addEventListener()与removeEventListener()函数

接收三个参数: 事件名、函数、冒泡(从内向外)或捕获的布尔值,false表示冒泡

可以对同一个按钮定义多个事件,按顺序执行

<input type="button" value="test" id="btn1">
        <script type="text/javascript">
            var btn1 = document.getElementById("btn1");
            btn1.addEventListener('click',function () {
                alert('a');
            },false);
            var handler = function () {
                alert('b');
            }
            btn1.addEventListener('click',handler,false);


        </script>
//先弹窗a,后弹窗b

移出事件不能使用匿名函数的形式,否则无法移除

			var btn2 = document.getElementById("btn2");
            var count = 0;
            var handler2 = function () {
                alert(count++);
                if(count == 3){
                    alert('break');
                    btn2.removeEventListener('click',handler2,false);
                }

            }
            btn2.addEventListener('click',handler2,false);
//点击三次后移除输出事件

eventPhase属性,捕获阶段调用的时间处理程序,值为1,

出于目标对象上,值为2,

出于冒泡阶段,值为3.

			var btn = document.getElementById("btn");
            btn.onclick=function (e) {
                alert(e.eventPhase);
            }
            document.body.addEventListener('click',function (e) {
                alert(e.eventPhase);

            },true);
            document.body.onclick = function (e) {
                alert(e.eventPhase);
            }
//点击按钮先后弹出1,2,3
//点击外围弹出2,2