JavaScript 事件绑定

来源：互联网发布：岂凡网络怎么样编辑：程序博客网时间：2024/05/17 08:08

实习的几个月，一直在使用jquery或者zepto的on()和off()两个函数统一处理事件绑定。

最近看到一篇移动端H5页面开发的优化文章，上面建议简单的H5页面使用javascript的原生事件绑定方法，于是对此进行了复习。

有四种绑定方式：
1、在元素中，通过onXXX（事件）设置绑定方法
2、在Javascript代码中，通过获得元素，为元素的onXXX（事件）设置绑定方法
3、通过for、event为元素绑定事件（IE4+）。for后面是元素id，event是具体事件
4、通过attachEvent为元素绑定事件（IE5+）。第一个参数是事件名，第二个参数是绑定的方法

<html><head><title>event test</title></head><bodyonload="init()"><!-- 绑定方式一:在元素中，通过onXXX（事件）设置绑定方法--><buttonid="btn1" onclick="display()">绑定方式一</button><!-- 绑定方式二：在Javascript代码中，通过获得元素，为元素的onXXX（事件）设置绑定方法--><buttonid="btn2">绑定方式二</button><!-- 绑定方式三：通过for、event为元素绑定事件（IE4+）。for后面是元素id，event是具体事件--><buttonid="btn3">绑定方式三</button><!-- 绑定方式四：通过attachEvent为元素绑定事件（IE5+）。第一个参数是事件名，第二个参数是绑定的方法--><buttonid="btn4">绑定方式四</button></body><scripttype="text/javascript">function init() { document.getElementById("btn2").onclick= display;//为button2绑定事件document.getElementById("btn4").attachEvent("onclick", display);//为button4绑定事件}function display(event) { var targ;//触发事件的对象引用if (!event) {var event = window.event;//获得当前事件(IE)}if (event.target) {//IE没有targettarg= evente.target;} elseif (event.srcElement) {//适用于IEtarg= event.srcElement;} //对触发事件的对象进行操作alert(targ.tagName+"-"+targ.id+"-"+event.x+"-"+event.offsetX);targ.disabled="disabled" ; } </script><scriptfor="btn3" event="onclick">display();//为button3绑定事件</script>

0 0