html5通过 js设置事件,[HTML5]HTML5之JS事件处理

JS事件处理：注册事件处理程序(个人喜欢把它看做函数调用)

三种方法

HTML级别的处理(标签属性的方式)

0级处理(通过getElementById()的方式)

2级处理(通过getElementById()的方式)

1.HTML级别的处理

使用简单，也是最基础的HTML注册事件处理的方式

按钮

function Begin() {

alert("测试练习开始");

}

调用方式：通过Onclick找到相应Script响应事件进行处理

如果我需要修改事件名字，不仅在Script代码块里面要修改，还要修改对应的注册事件名称，实际项目开发中，事件处理是基础并且会有许多，所以这种级别的方式实际上很耗时间

2.0级处理

使用较为方便，通过getElementById()的方式，寻找到对应id进行事件处理

var but1 = document.getElementById("button1");

but1.onclick = function () {

alert("O级处理程序");//被覆盖掉

}

but1.onclick = function () {

alert("会不会处理呢");

}

//清除事件,不会执行输出

// but1.onclick = null;

调用方式：使用0级处理，程序首先通过 document.getElementById("button1")找到相对应的控件，然后通过but1.onclick = function () {}进行处理事件

0级处理事件.gif

如果同一个控件有多个事件处理，它会顺序覆盖它的事件，最终执行最后一次的事件。然而实际开发中，多个事件如果覆盖了，只执行一次，那么就没有必要让一个控件有多个处理事件了，那不是多此一举吗？

3.二级处理事件

使用方便，随时可以进行事件的调用，并且都会执行

var but = document.getElementById("button1");

but.addEventListener("click",demo);

but.addEventListener("click",demo2);

function demo() {

alert("2级处理事件")

}

function demo2() {

alert("2级处理事件的另外的");

}

//移除事件 but.removeEventListener("click",demo);

调用方式：与0级处理事件方式相同

2级处理事件.gif

依次执行所有的处理事件，不进行覆盖，实用性强

注意：在我们需要对某些处理事件移除的时候使用removeEventListener("名称",处理事件名)将其对应的时间进行移除(注销)

最后通过这三个事件处理，可以完成IE浏览器版本适配的问题

火狐与IE浏览器.gif

var bt = document.getElementById("button1");

if(bt.addEventListener){

bt.addEventListener("click",text1)

}else if(bt.attachEvent){

bt.attachEvent("onclick",text1)

}else{

bt.onclick = text1();

}

function text1() {

alert("支持")

}

UP主留言：UP学习HTML5时间不长，这是UP主第一次提笔写关于HTML5的技术心得，有不正确的地方可以一起交流探讨