<!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. 2019-8-31-C#-使用汇编

    title author date CreateTime categories C# 使用汇编 lindexi 2019-08-31 16:55:58 +0800 2019-2-16 8:56:5 + ...

  2. windows自动关机(任务计划程序 + exe文件)

    需求:windows系统自动关机 的需求: 相关工具:win10系统中,使用windows自带的任务计划程序 和 windows自带的关机 exe文件 完成此需求 exe文件位置:C:\Windows ...

  3. Educational Codeforces Round 65 E,F

    E. Range Deleting 题意:给出一个序列,定义一个操作f(x,y)为删除序列中所有在[x,y]区间内的数.问能使剩下的数单调不减的操作f(x,y)的方案数是多少. 解法:不会做,思维跟不 ...

  4. Java访问数组

    package java03; /* 使用动态初始化数组的时候,其中的元素会自动拥有一个默认值,规则如下: 如果是整数类型,默认为0 如果是浮点类型,默认为0.0 如果是字符类型,默认为'\u0000 ...

  5. Qt 【widget如何铺满窗口】

    刚接触qt不是很长时间,都是使用ui拖拽控件实现界面,然后发现有些问题就是控件一旦多了起来,拖拽就不好控制了,然后就转而使用纯代码开发. 一下是碰到第一个问题: 创建一个MainWidget; Mai ...

  6. JavaSE---System类

    1.概述 1.1 System类  代表当前java程序的运行平台: 1.2 System类  提供的类方法: getenv():获取系统所有的环境变量: getenv(String name):获取 ...

  7. Selenium之WebDriverWait

    转自https://blog.csdn.net/duzilonglove/article/details/78455051 Selenium之WebDriverWait用法

  8. boost库:字符串处理

    使用boost库的字符串处理之前,需要进行区域设置.类:std::locale,每个C++程序自动拥有一个此类的实例,不能直接访问全局区域设置. 全局区域设置可以使用类std::locale中的静态函 ...

  9. Python--反射(重点)、面向对象内置方法:如__str__、面向对象的软件开发

    复习: Python3统一了类与类型 类的名称空间在定义阶段产生,看名称空间:类.__dict__ Python3特点:可以多继承 Python3都是新式类 继承意义:解决重复代码   组合:也是解决 ...

  10. 关于Burp Suite不能抓包的解决方法

    一.Burp Suite有时能抓到包,有时不能抓到包 解决方法: 出现这种问题的原因就是代理没有设置成全局的,只是设置成了局部的. 打开IE浏览器,依次打开工具->Internet 属性-> ...