您的位置：首页 > Web前端 > JavaScript

D 04_JS事件的两种绑定方式,元素绑定和DOM绑定

2017-06-16 18:06 821 查看

JS事件的两种绑定方式

1,元素事件句柄绑定

将事件以元素属性的方式写到标签内部，进而绑定对应函数。

示例1：【为事件绑定一个无参函数】

示例2：【为事件绑定一个有参函数】

示例3：【为事件绑定一个有参函数-this】

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" value="1111" onclick="run1()" />
<input type="text" value="2222" onclick="run2('2222')"/>
<input type="text" value="3333" onclick="run3(this)"/>

</body>

<script type="text/javascript">
function run1(){
alert("你好呀")
}
function run2(str){
alert(str)
}
function run3(obj){
alert(obj.value())
}
</script>
</html>

示例4：【为事件绑定多个函数】

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<input type="text" name="uname" onclick="run1(),run2(),run3()" />
<script>
function run1(){
alert("ffff1")
}
function run2(){
alert("ffff2")
}
function run3(){
alert("ffff3")
}

</script>
</body>
</html>

事件句柄绑定方式-

优点：①开发快捷

②传参方便

③可以绑定多个函数

缺点：JS和HTML代码高度糅合在一起，不利于多部门的项目开发维护

2,DOM绑定方式

使用DOM的属性方式绑定事件。

示例1：【将下述绑定转为DOM方式绑定】

示例2：【使用DOM绑定方式，为文本框onclick事件绑定run1方法】

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title
4000
></title>
</head>
<body>

<script type="text/javascript">
function run1(){
alert("加载完毕");
}
//DOM绑定方式,对象,事件属性
//window.onload=run1;

//DOM绑定方式,可以绑多次,绑定多个方法
window.onload=function(){
run1();
}
</script>
</body>
</html>

DOM绑定方式-

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
* 用DOM表单将js和html完全分开,提高了代码的可维护性
*/
function run1(){
alert("run1被调用了");
}
function run2(){
alert("run2被调用了");
}
window.onload=function (){
var t1=document.getElementById("t1")
t1.onclick=function (){
run1();
run2();
}
}
</script>
</head>

<body>

<input type="text" id="t1" />

</body>

</html>

优点：使得HTML代码和JS代码完全分离

缺点：①不能传递参数。解决：匿名函数是可以的

②一个事件只能绑定一个函数解决：匿名函数内部是可以绑定多个哈数。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航