关于js中的onclick事件和JQuery中的click方法

最新推荐文章于 2020-12-21 13:18:20 发布

weixin_34192993

最新推荐文章于 2020-12-21 13:18:20 发布

阅读量198

点赞数

文章标签： xhtml python javascript ViewUI

原文链接：https://my.oschina.net/zjllovecode/blog/1582107

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.onclick是绑定的事件(它是一个事件)，注意该事件绑定只是JacaScript中有，Jquery中并没有此事件，告诉浏览器在鼠标点击时候要做什么

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="GBK">  
        <title>测试onclick事件</title>  
        <script type="text/javascript">  
            function mouse(){  
                alert('我是一张图片!!!');  
            }  
        </script>  
    </head>  
    <body>  
        <img src="../1.jpg" alt="图片" onclick="mouse()"/>  
    </body>  
</html>

2.click方法(jquery中的)作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件。

click()方法的主要作用是触发调用click方法元素onclick事件,实际上是模拟了鼠标的点击动作。此外，如果在click括号内定义了其他可执行语句，则click方法会在执行完onclick事件之后执行括号内部的语句。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>测试Jquery中的click方法(表单选择器)</title>  
 <!--   引入jQuery -->  
 <script src="../js/jquery-1.11.0.min.js"></script>  
 <script src="../js/assist.js"></script>  
 <link rel="stylesheet" type="text/css" href="../css/style.css" />   
 <script type="text/javascript">  
    $(function(){  
        $("#btn1").click(function(){  
            //alert($("#form1 :input").size());  
            //alert($("#form1 :input").length);  
            alert($("#form1 input").size());  
        });  
    });  
 </script>  
</head>  
<body>  
  <input type="button" value="选取所有的表单子元素" id="btn1"/><br />  
      
  <form id="form1" action="#">  
    <input type="button" value="Button"/><br/>  
    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>  
    <input type="file" /><br/>  
    <input type="hidden" /><br/>  
    <input type="image" src="1.jpg"/><br/>  
    <input type="password" /><br/>  
    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>  
    <input type="reset" /><br/>  
    <input type="submit" value="提交"/><br/>  
    <input type="text" /><br/>  
    <select><option>Option</option></select><br/>  
    <textarea rows="5" cols="20"></textarea><br/>  
    <button>Button</button><br/>  
  </form>  
  <div></div>  
</body>  
</html>

来自：关于js中的onclick事件和JQuery中的click方法以及on方法事件的详解以及区别

更多参考：onclick和click区别及传参方式

click()和onclick()的区别：

转载于:https://my.oschina.net/zjllovecode/blog/1582107