<!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. Win32 API 多线程编程——一个简单实例(含消息参数传递)

    Win32 API进行程序设计具有很多优点:应用程序执行代码小,运行效率高,但是他要求程序员编写的代码较多,且需要管理所有系统提供给程序的资源,要求程序员对Windows系统内核有一定的了解,会占用程 ...

  2. 二、kubernetes搭建集群

    一.准备工作 主要内容 .环境准备(2主机) .安装流程 .问题分析 .总结 环境配置(2主机) 系统:CentOS 7.3 x64 网络:局域网(VPC) 主机: master:172.16.0.1 ...

  3. python 内置模块-re

    想要在python中使用正则表达式,就需要先导入re模块,正则表达式是一个强大的功能,可以为我们节省很多工作量. 一.元字符: 用一些具有特殊含义的符号表示特定种类的字符或位置.     . 匹配除换 ...

  4. [CSP-S模拟测试]:斯诺(snow)（数学+前缀和+树状数组）

    题目传送门(内部题37) 输入格式 第一行一个整数$n$,表示区间的长度. 第二行一个长度为$n$的只包含$0,1,2$的字符串,表示给出的序列. 输出格式 一行一个整数,表示革命的区间的数量. 样例 ...

  5. 一些idea

    二分答案似乎和最小生成树有着不可描述的奇怪关系.(滑稽 联赛级别的在矩形上乱搞的题无非几个思路(按出现概率排序):建图,二维前缀和,dp 涉及到求合法区间数的问题往往要用到桶.等差数列等思想,或者尝试 ...

  6. 【Tomcat】1.Tomcat在Windows系统的安装和使用

    1.下载与安装 安装Tomcat的[前提条件]是安装好JDK或者JRE(本文略过)Tomcat在Windows系统中可以通过[压缩包]或[安装包]来安装建议使用[安装包]来简化安装步骤登录官网http ...

  7. python如何读写EXCEL文档 (有助于自动化的参数化，用的方法是XLRD，XLWT）

    读EXCEL: import xlrd 例1, data=xlrd.open("E:\egg.xls")     # 打开xls文件 table=data.sheets()[0] ...

  8. MySQL replace 和 replace into 的用法

    mysql replace实例说明: UPDATE tb1 SET f1=REPLACE(f1, 'abc', 'def'); REPLACE(str,from_str,to_str) 在字符串 st ...

  9. HTML5: HTML5 测验

    ylbtech-HTML5: HTML5 测验 1.返回顶部 1. HTML5 测验 结果:15/5 1. HTML5 之前的 HTML 版本是什么? 你的回答: HTML 4.01 回答正确! 2. ...

  10. 在windows命令行下安装和使用babel（es6to5）

    在自己的目录下新建一个babel-test/目录 进入这个目录 1. 安装babel命令和转换库:      npm install babel-cli      npm install babel- ...