<!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>查看全部 2 个回答
第一个行内定义的是DOM元素的attribute，下面访问DOM.onclick可以看作是访问的property。
<a id="test" onclick="alert('abc')">test</a>
<script>
var a = document.querySelector('#test');
console.log(a.onclick); // function onclick(event) { alert('abc'); }
a.attributes['onclick'].value = 'alert(\'test\')';
console.log(a.onclick); // function onclick(event) { alert('test'); }
</script>
推荐答案
已采纳
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级事件绑定方式');
}
可以，就是把一个函数赋给了onclick。只是函数的执行，是点击的时候才执行！
— 守候 · 2017年06月19日