JavaScript中事件处理的过程有
第一阶段:HTML事件处理阶段。就是在元素里面添加onclick之类的属性来调用某个函数。
1
1 function test() {2 alert(0);3 }
这种写法有2个缺点:
1。 存在时差问题。用户可能在HTML元素已出现在页面上就出发相应的事件,但是如果事件处理程序可能还没有加载过来,就会引发错误。
2。HTML和javascript紧密耦合,如果要更换事件处理程序,则就要同时修改HTML和jiavascript代码,给维护工作带来了很大的麻烦。
第二阶段:DOM0级事件处理程序阶段
1
1 var btn = document。...全部
第一阶段:HTML事件处理阶段。就是在元素里面添加onclick之类的属性来调用某个函数。
1
1 function test() {2 alert(0);3 }
这种写法有2个缺点:
1。
存在时差问题。用户可能在HTML元素已出现在页面上就出发相应的事件,但是如果事件处理程序可能还没有加载过来,就会引发错误。
2。HTML和javascript紧密耦合,如果要更换事件处理程序,则就要同时修改HTML和jiavascript代码,给维护工作带来了很大的麻烦。
第二阶段:DOM0级事件处理程序阶段
1
1 var btn = document。getElementById("guoBtn");2 btn。onclick = function () {3 alert("你单击了我");4 }
我现在有一个新的需求就是,我不光想要它在这个事件中弹出"你单击了我",我还要它在相同的事件名下,在弹出"其实你只单击了我一次,但是我却弹出2次"的提示。
1 btn。onclick = function () {2 alert("其实你只单击了我一次,但是我却弹出2次");3 }
这种情况下,它只执行后面一个提示。
实际上只执行一次click的事件处理程序。这个问题在第三阶段得到了解决。
删除事件处理程序:
1 btn。onclick = null;
现在在单击这个按钮后,就不会再有弹出提示了。
第三阶段:DOM2级事件处理程序,addEventListener()和removeEventListener();
1
1 var btn = document。
getElementById("guo");2 btn。addEventListener("click", function () { alert(this。value); }, false);
第一个参数:事件名
第二个参数:事件的处理程序
第三个参数:true表示在事件捕获阶段调用时间处理程序;false表示在冒泡阶段调用事件处理程序。
给同一个时间添加多个时间处理程序,这是事件处理程序的第二阶段所做不到的。
1 btn。addEventListener("click", function () { alert("同一个单击,第二次执行"); }, false);
这样的写法,是没有办法删除掉事件处理程序的,因为调用的匿名函数没有相应的应用(没有一个变量来接受)所以必须得做一些改动
1 var hander = function () {//将处理程序提取出来2 alert("同一个单击,第二次执行");3 }4 btn。
addEventListener("click", hander, false);5 btn。removeEventListener("click",hander,false);
现在在单击这个按钮的话,就没有了后面的提示了。
收起
