<!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. shell函数的存储和显示

  2. linux 系统磁盘管理体系

    目录 linux 系统磁盘管理体系 一.磁盘的基本概念 二.磁盘的内部结构 三.磁盘的外部结构 四.磁盘的接口及类型 五.fdisk磁盘分区实践 六.gdisk 分区 七.parted 高级分区工具. ...

  3. yum 仓库搭建与源码包安装实战

    目录 一.yum 仓库自建示例: 二.源码包安装实践 基础环境 服务端配置 下载及安装fpm软件 客户端: 一.yum 仓库自建示例: 1.安装ftp服务 yum -y install vsftpd ...

  4. Linux系统分辨率设置

    linux 设置分辨率 如果你需要在linux上设置显示屏的分辨率,分两种情况:分辨率模式存在与分辨率模式不存在,具体如下. 1,分辨率模式已存在 1)如何查询是否存在: 图形界面:在System S ...

  5. C++的命名空间

    作用:防止类,函数,变量等之间重名,比如在代码合并的时候 假如两个头文件中均定义了类Cal,而调用程序同时包含了两个头文件,当在定义Cal c时,程序会报类型重定义的错误.这种问题可以通过命名空间来解 ...

  6. Android 编译笔记20191205

    gradle下载很慢 解决问题的方法如下: 使用文件管理器 打开用户主目录 windows平台: c:\Users\用户名\.gradle macos平台: /Users/用户名/.gradle li ...

  7. springcloud中provider-product依赖

    <dependencies> <dependency> <groupId>cn.lijun.springcloud</groupId> <arti ...

  8. 理解webpack中的process.env.NODE_ENV

    参考资料 一. process 要理解 process.env.NODE_ENV 就必须要了解 process,process 是 node 的全局变量,并且 process 有 env 这个属性,但 ...

  9. 【Flutter学习】之绘画实例(一)

    一,概述 画布(Canvas) 画布是一个矩形区域,我们可以控制其每一像素来绘制我们想要的内容 Canvas 拥有多种绘制点.线.路径.矩形.圆形.以及添加图像等的方法,结合这些方法我们可以绘制出千变 ...

  10. Windows Xp Sp3官方简体中文版(原版) 纯净安装版 百度网盘下载

    百度网盘下载: 1.链接:https://pan.baidu.com/s/1o-HcKddSG6IAz_0COKhq8Q 提取码:hkhr 2.扫码下载: