felayman-在html中使用javascript事件的几种方式
日期：2014-05-16 浏览次数：20713 次
felayman------在html中使用javascript事件的几种方式
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<button id="btn">点击</button>
</body>
<script type="text/javascript">
/*
在html中javascript的几种事件使用方法
1.我们直接在html中使用javascript事件,如
*/
</script>
<input type="button" value="按钮1" onclick="(function(){alert('点击了我按钮1')})()"/>
<!--
我们之所以能在html中这样直接使用javascript函数,并不是因为html解析器能识别它,因为它不是
html规范的一部分,而是javascript的规范的一部分,而浏览器作为html和javascript的宿主容器
它能够识别我们写入的是javascript标准还是html标准,因此当浏览器解析到该行语句的时候,发现
需要进行脚本的解析,便会去开启另一个线程来处理脚本,但是这么写并不好,就像我们在jsp页面中写入
了大量的java代码一样,既不美观,也不便维护,因此这种直接在html标签内来使用事件的方式我们极力
不推荐
-->
</html><html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
/*
在html中javascript的几种事件使用方法
2.在html元素中使用函数调用
如,我们在两个脚本中都分别定义了tanchu函数
当浏览器解析到该事件的时候,会去执行下面脚本
的函数,而在上面被定义的函数会被忽略掉.这种
事件的绑定方式为前期绑定,即浏览器事先已经为
我们绑定了onclike事件,我们只需要去负责如何
实现点击触发的内容即可.这种方式逻辑清晰,是
我们极力推荐的写法.
*/
function tanchu(value){
alert("hello,"+value);
}
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="tanchu(this.value)"/>
</body>
<script type="text/javascript">
function tanchu(value){
alert("hellohello,"+value);
}
</script>
</html><html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
</script>
</head>
<body>
<input type="button" value="按钮1" onclick="tanchu(this.value)"/>
</body>
<script type="text/javascript">
/*
在html中javascript的几种事件使用方法
3.在脚本中动态绑定事件
如下面,我们不需要一个具有onclick属性的html元素来装载
事件,而是我们自己在脚本中动态绑定事件,这样有什么好处呢?
当我们在开发的时候需要为某一个元素在不同的情况赋予不同的
点击效果的时候,我们可以来动态绑定事件,因为我们绑定的时候
我们也可以取消绑定,这样我们就可以为一个元素来呈现多种点击
效果,在jquery中也很大程度上体现这种思想,当前这样去绑定事
件的方法,我们也需要注意,我们的脚本内容必须在你所想要绑定的
元素之后,因为如果我们的脚本象想在这样,那么浏览器会先解析我
们的脚本内容,而没有加载到我们需要绑定的元素,那么绑定则必然
失败,因此,我们需要把该脚本移动到绑定的元素之后
*/
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("hello,点击我了.");
};/*
当我们需要取消该事件的事件,我们只需要将点击事件取消即可
*/
btn.onclick = null;
</script>
<button id="btn">按钮</button>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
