<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

<body>

  <form action="">

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

    <input type="button" id="btn" value="click me" this="32" event="sd">

  </form>

</body>

<script>

  document.getElementById('btn').onclick = function () {

    console.log(Array.prototype.slice.call(arguments)); // [MouseEvent] ie8及以下为空

    console.log(this);  // 该input对象

    console.log(event);  // 该点击事件

    console.log(this.form);  // input所在的表单对象

    console.log(this.form.username.value);  // 用户名input输入的值

  }

</script>

</html>

1、通过此方法绑定的事件，作用域是该元素对象；

2、多次绑定的事件，后面定义的覆盖之前的事件；

3、此方法绑定的事件在事件流中的冒泡过程中触发。

DOM0级事件绑定之js的onclick事件的更多相关文章

  1. js、jq事件绑定方式总结——以click事件为例

    一.JavaScript点击事件绑定方法 1.1 HTML onclick事件属性 <button onclick="clickMe(this)">click me&l ...

  2. jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）

    1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...

  3. js 中onclick 事件 点击后指向自己的对象,查找或者添加属性 用关键字this 传入参数 (可以改变原标签css)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. thymeleaf 传参到js的onclick事件中

    html: <img th:onclick="'javascript:imgClick(\''+${card.id}+'\',\''+${card.name}+'\');'" ...

  5. js 增加 onclick 事件

    obj.onclick = function(){check(this)} function check(obj){ alert(obj)l }

  6. JS中onclick事件传参

    美术馆案例中,需要将“增加一个img标签,放入大图片”这样一个函数封装,但是在调用的时候需要传参. <script type="text/javascript"> on ...

  7. JS Event事件流（冒泡机制、捕获机制、事件绑定）

    1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播 ...

  8. JS基础——事件绑定

    上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...

  9. 关于js中对事件绑定与普通事件的理解

    普通事件指的是可以用来注册的事件: 事件绑定是指把事件注册到具体的元素之上. 通俗点说: 普通事件:给html元素添加一个特定的属性(如:onclick): 事件绑定:js代码中通过标记(id  ta ...

随机推荐

  1. linux-ftp install

    ftp安装 yum install vsftpd vi /etc/vsftpd/vsftpd.conf (可以先备份,但不要放在此目录下,不然启动vsftpd的时候 也会加载其备份文件,报启动错误,因 ...

  2. @ResponseEntity返回值(怪异)

    定制相应头 /** * 将返回数据放在响应体中 * * ResponseEntity<String>:响应体中内容的类型 * @return */ //@ResponseBody @Req ...

  3. C#语言是专门为.NET提供的开发语言（visual studio 2008序列号）

    .net是微软的一个平台在这个平台上的语言有C#.C++.VB等,其中C#是专门为.NET平台开发的语言,语法简洁美观.建议安装visual studio 2008,你可以去微软官方下载90天试用版, ...

  4. Ubuntu备份与恢复

    在使用Ubuntu之前,相信很多人都有过使用Windows系统的经历.如果你备份过Windows系统,那么你一定记忆犹新:首先需要找到一个备份工具(通常都是私有软件),然后重启电脑进入备份工具提供的软 ...

  5. hdu 4609 3-idiots(FFT+去重处理)

    3-idiots Problem Description King OMeGa catched three men who had been streaking in the street. Look ...

  6. 工程师技术(四)：配置SMB文件夹共享、多用户Samba挂载、普通NFS共享的实现、安全NFS共享的实现

    一.配置SMB文件夹共享 目标: 本例要求在虚拟机 server0 上发布两个共享文件夹,具体要求如下: 1> 此服务器必须是 STAFF 工作组的一个成员   2> 发布目录 /comm ...

  7. Nginx在Windows平台的配置

    Nginx在Windows平台的配置 能够使用Nginx搭建Tomcat集群,并完成负载均衡. 1.什么是Nginx 2.为什么使用Nginx 背景: 互联网飞速发展的今天,大用户量高并发已经成为互联 ...

  8. UVA 822 Queue and A

    题目链接:https://vjudge.net/problem/UVA-822 翻译摘自:<算法禁赛入门经典> 题目大意 你的任务是模拟一个客户中心运作情况.客服请求一共有n(1 ≤ n ...

  9. 2019浙江省赛 Strings in the Pocket【manacher】

    Strings in the Pocket 题目链接 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=6012 题意 给你两个字符 ...

  10. Locally weighted regression algorithm

    之前所讨论的梯度下降算法,其算法模型是“线性回归模型”,我们可以理解为变量与因变量之间的关系是线性的.而现实情况是,使用线性模型去描述所有数据,很容易出现欠拟合(underfitting)的情况:同样 ...