javascript - 事件的定义有无函数的区别
本文介绍了javascript - 事件的定义有无函数的区别的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨游览器封装函数</title>
</head>
<body>
<h1 onclick="alert('这是html事件绑定方式1')">html事件绑定方式1</h1>
<h1 onclick="f1()">html事件绑定方式2</h1>
<h2 onclick="f1()">dom0级事件绑定方式</h2>
<script type="text/javascript">
function f1(){
alert('这是html事件绑定方式2');
}
var h2 = document.getElementsByTagName('h2');
console.log(h2[0]);
h2[0].onclick = function(){
alert('这是dom0级事件绑定方式');
}
h2[0].onclick = "alert('这是dom0级事件绑定方式')";
</script>
</body>
</html>
解决方案
1.首先h2[0].onclick = "alert('这是dom0级事件绑定方式')"
;这个写法你仔细看下就知道是什么意思了!相当于把"alert('这是dom0级事件绑定方式')"
当成一串字符串赋值给onclick,只是一串字符串,无法起效的!
2.然后,<h1 onclick="alert('这是html事件绑定方式1')">html事件绑定方式1</h1>
,这个写法,在html标签这里绑定的,onclick
后面跟着的alert('这是html事件绑定方式1')
,这部分就是函数的内容,就是你点击了,触发了事件,就执行的内容。跟<h1 onclick="(function(){alert('这是html事件绑定方式1')})()">html事件绑定方式1</h1>
这个写法是等价的,看了这个写法就知道是怎么回事了!就是相当于,定义了一个自动执行的匿名函数,而函数执行的内容,就是你写的alert('这是html事件绑定方式1')
。
3.最后,这个就不多解释了,这个是原理就是点击后出发的事件,执行函数而已!
h2[0].onclick = function(){
alert('这是dom0级事件绑定方式');
}
这篇关于javascript - 事件的定义有无函数的区别的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文