在script中有几种绑定事件的方法，有的在绑定函数中传入this参数，有的没有，那么，它们之间到底有什么区别呢？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<form action="/index.html" method="post">

    {% csrf_token %}

    <input type="text" name="username"/>

    <a onclick="submit()">提交</a>

    <a onclick="submit1(this)">提交</a>

    <a id="fm">提交</a>

</form>

<script src="/static/js/jquery-3.3.1.min.js"></script>

<script>

    /*

     绑定事件中this的用法

    */

    function submit() {

        console.log(this)

    }

    /*

     如果以此种方式绑定事件，括号中不传入this参数，那么this在这里代指的就是整个doucumeng对象

     */

    
　  function submit1(ths) {

        console.log(ths)

    }

     /*

     如果以此种方式绑定事件，括号中传入this参数，那么this在这里代指的就是当前标签对象

    */

　  $('#fm').click (function submit3() {

         console.log(this);

     });

 /*

        找到当前标签

   如果以此种方式绑定事件，括号中不传入this参数，那么this在这里代指的就是当前标签对象

    */

</script>

</body>

</html>

javascript中点击事件传入this的用法的更多相关文章

  1. Javascript中点击（click）事件的3种写法

    方法一 <!DOCTYPE html> <html> <head> <title>Javascript中点击事件方法一</title> &l ...

  2. JS中点击事件冒泡阻止

    JS中点击事件冒泡阻止 解析: 一个div层'out',内含有一个div层'in'.如下: 两个层都绑定了点击事件,但是点击in层的时候,点击事件会出现冒泡现象,同时也会触发out层的点击事件. 但是 ...

  3. Android中点击事件的四种写法详解

    Android中点击事件的四种写法 使用内部类实现点击事件 使用匿名内部类实现点击事件 让MainActivity实现View.OnClickListener接口 通过布局文件中控件的属性 第一种方法 ...

  4. js for循环中点击事件中无法获取每一个i值的问题

    好像是第二次遇到这个问题,必须要总结一下!! <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  5. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  6. JavaScript点击事件-一个按钮触发另一个按钮

    <input type="button" value="Click" id="C" onclick="Go();" ...

  7. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  8. 【javascript】iOS Safari 中点击事件失效的解决办法

    问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. ...

  9. JavaScript点击事件——美女合集

    Js点击事件--美女合集 实例 效果如下图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. JAVA 添加、修改和删除PDF书签

    当阅读篇幅较长的PDF文档时,为方便我们再次阅读时快速定位到上一次的阅读位置,可以插入一个书签进行标记:此外,对于文档中已有的书签,我们也可以根据需要进行修改或者删除等操作.本篇文章将通过Java编程 ...

  2. 初学Linux应该注意的事项

    相比于windows linux严格区分大小写 linux所有内容都是以文件形式保存 linux不靠扩展名区分文件类型(靠权限),linux下文件扩展名主要是方便管理员分类 linux所有的存储设备都 ...

  3. QString：常用成员函数总结

    QString是Qt中使用频率最高的几种数据类型之一,主要在于其提供了大量功能强大的成员函数,这里重点介绍一些常用的成员函数: 一.字符串处理相关 1.1 split() (拆分字符串) split( ...

  4. COT2 - Count on a tree II（树上莫队）

    COT2 - Count on a tree II You are given a tree with N nodes. The tree nodes are numbered from 1 to N ...

  5. [转]Oracle - 数据库的实例、表空间、用户、表之间关系

    本文转自:http://www.cnblogs.com/adforce/p/3312252.html 完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例. 1) 数据库是一系列物 ...

  6. form表单ajaxSubmit提交并验证

    html: <form class="register-form" action="{:U('')}" method="post"&g ...

  7. poj3685 Matrix

    思路: 二分套二分. 矩阵在每一列上是严格递增的,可以利用这一点进行二分. 实现: #include <cstdio> #include <cmath> #include &l ...

  8. [Android]如何实现无限滚动的ListViw/GridView(翻译)

    ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们提供了一个良好,整洁的用户体验 ...

  9. InChatter系统之服务客户端的开发

    今天终于开始客户端的开发了,客户端完成以后,我们将可以进行简单的交流.开发完成的程序只是一个很简单的雏形,在本系统完成以后,以及完成的过程中,大家都可以下载源码,在此基础上融入自己的想法和尝试,可以按 ...

  10. webstorm里直接调用命令行

    写代码写到一半要切换窗口出去敲命令行?webstorm的external tools可以帮你省下一点时间 举例说明,比如我要直接使用npm: ctrl+alt+s打开setting菜单,找到exter ...