<!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. 拓展练习部分---打包压缩 及 RPM工具

    目录 打包压缩部分 1.linux下常见的压缩包类型有哪些 rpm 工具部分 打包压缩部分 1.linux下常见的压缩包类型有哪些 .zip .gz 会删除源文件 .bz2 会删除源文件 .tar.g ...

  2. OpenCV常用基本处理函数（8）图像变换

    傅里叶变换 傅里叶变换在实际中有非常明显的物理意义,设f是一个能量有限的模拟信号,则其傅里叶变换就表示f的频谱. 图像的频率是表征图像中灰度变化剧烈程度的指标,是灰度在平面空间上的梯度.如:大面积的沙 ...

  3. Python--模块之sys模块、logging模块、序列化json模块、序列化pickle模块

    sys模块 sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit() sys.path 返回模块的搜索路径,初始化时使用PYTHONPA ...

  4. Hibernate学习 （一）

    Hibernate错误总结: 1:不能自动创建表.把MySQL的版本的方言修改一下. 首先自己要注意自己的MYSQL版本,然后设置对应的方言 兼容性模式 <property name=" ...

  5. ecshop整合discuz教程完美教程

    所需软件: ecshop安装包:    ECShop_V2.7.3_UTF8_release1106.rarucenter安装包:   UCenter_1.6.0_SC_UTF8.zipdiscuz! ...

  6. hive内部表&外部表介绍

    未被external修饰的是内部表(managed table),被external修饰的为外部表(external table):区别:内部表数据由Hive自身管理,外部表数据由HDFS管理:内部表 ...

  7. 使用Guzzle执行HTTP请求

    Guzzle是一个PHP的HTTP客户端,用来轻而易举地发送请求,并集成到我们的WEB服务上.Guzzle提供了简单的接口,构建查询语句.POST请求.分流上传下载大文件.使用HTTP cookies ...

  8. java 11 已移除 javax.xml.bind

    @SneakyThrows public static <T> String convertToXml(T obj) { require(obj); JAXBContext jaxbCon ...

  9. (10)C++ 使用类

    一.运算符重载 1. #include<iostream> using namespace std; class Sum { int add; public: Sum(int add) { ...

  10. C# winform 动态构建fastreport报表

    private void DoPrint() { DataView dv = (DataView)dgv_apply_details.DataSource; Report report = new R ...