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

来源：互联网发布：数控车床编程教学ppt 编辑：程序博客网时间：2024/06/07 17:44

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></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代码完全分离

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

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

阅读全文

1 0