HTML中click()和onclick()联系区别

qq_43609721

于 2023-08-23 15:09:56 发布

阅读量233

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_43609721/article/details/132452980

版权

事件与方法

什么叫事件？什么叫方法？

事件：鼠标事件的触发条件，比如鼠标划出和划进、单击、双击等等

方法：是处理过程，即对一段自定义的代码封装和打包，方便再利用，避免重复性；

简单记为：事件：触发事件，方法：处理过程；

click()和onclick()的关系

onclick()是绑定事件：作用执行函数代码；

click()本身是方法：作用是触发onclick()事件

<script type="text/javascript">
    $(function(){
        $("#b2").click(function(){
            $("#b1").click();
        });});
    function change(){
        alert("调用了方法change");
    }

</script>
<button id = "b1" onclick="change()">按钮1</button>
<button id = "b2">按钮2</button>

解释：

onclick()是绑定事件，告诉浏览器在鼠标点击时候要做什么

click()本身是方法作用是:触发onclick()事件

代码本质：

只要执行了元素的click()方法，就会触发onclick()事件。

如上诉代码所示，当点击按钮2按钮时,会触发按钮1的click()方法，而click()方法会触发onclick()事件；

结论一：执行了元素的click()方法会触发调用click方法元素onclick事件

结果：

点击按钮1：弹出：调用了方法change

点击按钮2：弹出：调用了方法change

第四点：：click()的延伸

可以在cliick()方法中再添加函数进行追加事件的作用；

click方法中的function代码会在onclick事件执行完后执行，此时click方法起到追加事件的作用。

代码示例：


</head>
<body>
<script type="text/javascript"> 
$(function(){
    $("#b1").click(function(){
    alert("调用了click()方法的追加事件");
    });});
function change(){
    alert("调用了方法change");
}

</script> 
<button id = "b1" onclick="change()">按钮1</button>
</body>
</html>

解释：

在执行click()方法后，执行标签内的change（）事件，然后再执行内部click()方法封装的内部函数alert()方法；

结果：先弹出调用了方法change，再弹出调用了click()方法的追加事件;

qq_43609721

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中click()和onclick()联系区别

在执行click()方法后，执行标签内的change（）事件，然后再执行内部click()方法封装的内部函数alert()方法；如上诉代码所示，当点击按钮2按钮时,会触发按钮1的click()方法，而click()方法会触发onclick()事件；结论一：执行了元素的click()方法会触发调用click方法元素onclick事件。结果：先弹出调用了方法change，再弹出调用了click()方法的追加事件;click()本身是方法：作用是触发onclick()事件。第四点：：click()的延伸。
复制链接

扫一扫