javascript - 事件的定义有无函数的区别
漂亮男人
漂亮男人 2017-06-26 10:56:00
[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>
漂亮男人
漂亮男人

全部回复(2)
女神的闺蜜爱上我

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级事件绑定方式');
        }
女神的闺蜜爱上我

第一个行内定义的是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>
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号