扫码关注官方订阅号
跨游览器封装函数 html事件绑定方式1 html事件绑定方式2 dom0级事件绑定方式
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 = "alert('这是dom0级事件绑定方式')"
"alert('这是dom0级事件绑定方式')"
<h1 onclick="alert('这是html事件绑定方式1')">html事件绑定方式1</h1>
onclick
alert('这是html事件绑定方式1')
<h1 onclick="(function(){alert('这是html事件绑定方式1')})()">html事件绑定方式1</h1>
h2[0].onclick = function(){ alert('这是dom0级事件绑定方式'); }
第一个行内定义的是DOM元素的attribute,下面访问DOM.onclick可以看作是访问的property。
attribute
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>
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
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.最后,这个就不多解释了,这个是原理就是点击后出发的事件,执行函数而已!
第一个行内定义的是DOM元素的
attribute,下面访问DOM.onclick可以看作是访问的property。